Есть сайт, который ищет фильмы из базы по названию, а потом показывает описание. Приложение состоит из двух контроллеров, каждый на своём шаблоне. Один и тот же функционал реализован в обоих контроллерах, но в первом он работает, а во втором нет:
Код первого контроллера:
filmApp.controller('searchFilmCtrl', function($scope){
$scope.datas = data.results;
$scope.totalResul = data.total_results;
$scope.itemId = data.id;
$scope.searchFilms = function(){
function successCB(APIres) {
APIres = JSON.parse(APIres);
$scope.setFilms(APIres)
};
function errorCB(resul) {
console.log("Error callback: " + APIres);
};
theMovieDb.search.getMovie({"query": $scope.searchName }, successCB, errorCB)
};
$scope.datas = data.results;
$scope.setFilms = function(APIres){
$scope.datas = APIres.results;
$scope.totalResul = APIres.total_results;
console.log($scope.totalResul);
}
});
И его шаблон
|
Код:
|
<div class="b-wrapper" ng-controller="searchFilmCtrl">
<div class="b-search-row">
<form ng-submit="searchFilms()">
<div class="col-md-12 relative">
<input type="text" class="form-control" ng-model="searchName" placeholder="Ведите название фильма...">
<input class="b-search-form-submit btn btn-primary" type="submit" value="поиск">
</div>
</form>
<div class="row">
<span class="col-md-12 h6 b-search_total_resul">Найдено фильмов: {{totalResul}}</span>
</div>
</div>
<div class="b-result-row">
<div class="b-result-item" ng-repeat="data in datas">
<a href="#/item/{{data.id}}" class="b-item-film-search col-md-12">
<span class="col-md-4">
<img style="width: 100%;" src="http://image.tmdb.org/t/p/w500/{{data.poster_path}}" alt=""/>
</span>
<span class="col-md-8">
<span class="h1">{{data.title}}</span>
<span class="h4">{{data.release_date}}</span>
<span class="descript">{{data.overview}}</span>
</span>
</a>
</div>
</div>
</div> |
Суть проста, пользователь вводит название фильма, я спрашиваю по АПИ результаты поиска, обновляют глобальную переменную data результатом поиска, после чего вывожу результаты.
Самое главное, что работает вот эта конструкция:
$scope.totalResul = data.total_results;
Дальше второй шаблон:
filmApp.controller('itemFilmCtrl', function($scope){
$scope.filmName = itemFilmData.original_title;
$scope.getInfoAboutFilm = function(){
function successCB(APIres){
APIres = JSON.parse(APIres);
$scope.setInfo(APIres)
}
function errorCB(APIres){
console.log("Error callback: " + APIres);
}
theMovieDb.movies.getById({"id": ''+splitHref[1]+'' }, successCB, errorCB)
}();
$scope.setInfo = function(APIres){
$scope.filmName = APIres.original_title;
console.log($scope.filmName);
};
HTML
|
Код:
|
<div class="b-wrapper" ng-controller="itemFilmCtrl">
<div class="b-control b-control--no-bord">
<a href="#/" class="btn btn-primary">К поиску</a>
<a href="#/edit" class="btn btn-primary fl-r">Редактировать</a>
</div>
<div class="b-item-film col-md-12">
<div class="b-poster col-md-4">
<img src="" alt=""/>
</div>
<div class="b-descript col-md-8">
<h1 class="h1">{{filmName}}</h1>
<p class="h4">Дата релиза</p>
<p class="descript">Описание фильма</p>
</div>
</div>
</div>
<script>
var href = window.location.href;
var splitHref = href.split('#/item/');
//На самом деле создавать глобальную переменную, чтобы передать данные из одного контроллера в другой, не самая хорошая идея.
//Но как сделать по-другому я пока не разобрался
</script> |
ТУт тоже все просто, пользователь заходит на страницу, из урла мы получаем id фильма, по нему запрашиваем информацию, записываем её в переменную itemFilmData и вот тут получается странная особенность. Конструкция:
$scope.filmName = itemFilmData.original_title;
Не работает. Т.е. после получении ответа, и обновлении информации в переменной информация на сайте не обновляется. А должна.
Отсюда вопрос, в чем может быть причина, и почему в первом случае все работает, а во втором нет
