AngularJS不更新模板
我有两个模板,AngularJS不更新模板,angularjs,Angularjs,我有两个模板,\u frontpage.html和\u movieOverview.html。我将这两个模板都注入我的应用程序.html.haml,如下所示: %div{"ui-view" => ""} %div{"ng-controller" => "searchCtrl", "ng-include" => "'assets/angular-app/templates/_movieOverview.html.haml'", :id => "container_front
\u frontpage.html
和\u movieOverview.html
。我将这两个模板都注入我的应用程序.html.haml
,如下所示:
%div{"ui-view" => ""}
%div{"ng-controller" => "searchCtrl", "ng-include" => "'assets/angular-app/templates/_movieOverview.html.haml'", :id => "container_frontpage"}
我已经使用路由器ui创建了一个主状态,在该状态下,\u frontpage.html
被注入我的searchCtrl
$stateProvider
.state('home', {
url: '',
controller: 'searchCtrl',
templateUrl: '../assets/angular-app/templates/_frontpage.html',
})
在我的\u frontpage.html
模板中,我有一个搜索字段。用户可以搜索电影标题并创建海报列表。然后他们可以点击海报,将该电影添加到数据库中。\u movieOverview.html
呈现所有结果
.movie_container{"ng-repeat" => "movie in movies | orderBy:'release_date' | filter:{user_id: user_id} "}
我的问题是,当用户向数据库添加新电影时,\u movieOverview.html
模板不会得到更新。只有当我刷新页面时,我才能看到添加的新电影
但是当我在\u frontpage.html
模板中插入\u movieOverview.html
模板时
%div{"ng-include" => "'assets/angular-app/templates/_movieOverview.html.haml'", :id => "container_frontpage"}
然后,当我将一部电影添加到数据库中时,模板将使用新电影进行更新。但现在我有一个模板,里面有一个我不想要的模板
所以我的问题是,如何使用来自不同模板的操作(执行搜索操作并将电影添加到数据库)更新模板(显示新电影)
我的searchCtrl.js中的一些代码
搜索操作的代码
$scope.search = function() {
if($('#search_input').val()) {
// Input field has value
var base = 'http://api.themoviedb.org/3';
var service = '/search/movie';
var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
var search = $scope.searchquery
var callback = 'JSON_CALLBACK'; // provided by angular.js
var url = base + service + '?api_key=' + apiKey + search + '&callback=' + callback;
$http.jsonp(url,{ cache: true}).
success(function (data, status, headers, config) {
if (status == 200) {
$scope.movieList = data.results;
console.log($scope.movieList)
} else {
console.error('Error happened while getting the movie list.')
}
}).
error(function (data, status, headers, config) {
console.error('Error happened while getting the movie list.')
});
} else {
// do nothing
}
}
当用户添加电影时,此函数将启动
$scope.addMovie = function() {
'http://api.themoviedb.org/3/movie/206647?api_key=a8f7039633f2065942cd8a28d7cadad4&append_to_response=releases'
// Search for release dates using the ID.
var base = 'http://api.themoviedb.org/3/movie/';
var movieID = $(event.currentTarget).parent().find('.movieID').text()
var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
var append_to_response = '&append_to_response=releases'
var callback = 'JSON_CALLBACK'; // provided by angular.js
var url = base + movieID + '?api_key=' + apiKey + append_to_response + '&callback=' + callback;
$http.jsonp(url,{ cache: true}).
success(function(data, status, headers, config) {
if (status == 200) {
$scope.movieListID = data;
console.log($scope.movieListID);
var releaseNL;
for (var i = 0; i < $scope.movieListID.releases.countries.length; i++) {
var release = $scope.movieListID.releases.countries[i];
if (release['iso_3166_1'] == 'NL') {
releaseNL = release;
}
}
if(typeof releaseNL === 'undefined'){
// With release date
Notification($scope.movieListID.original_title + ' is toegevoegd, maar heeft nog geen Nederlandse premiere datum.');
createMovie.create({
title: $scope.movieListID.original_title,
release_date: $scope.movieListID.release_date,
image: $scope.movieListID.poster_path,
movie_id: $scope.movieListID.id
}).then(init);
} else {
Notification.success($scope.movieListID.original_title + ' is toegevoegd.');
createMovie.create({
title: $scope.movieListID.original_title,
release_date: releaseNL.release_date,
image: $scope.movieListID.poster_path,
movie_id: $scope.movieListID.id
}).then(init);
};
} else {
console.error('Error happened while getting the movie list.')
}
})
用于更新模型、作用域和数据库的控制器代码在哪里?您是否正在使用更新的列表更新$scope.movies
属性?@MattWay我已从我的searchcontroller添加了代码,其中引用了搜索操作、添加操作和更新。您可能需要$scope。$apply()围绕在$scope上设置值的代码。这是因为您将jQuery和Angular混为一谈,现在您已经脱离了Angular的摘要循环。@BasSlagter我不确定我是否理解您所说的“围绕在$scope上设置值的代码”的意思。如果我向我的var init
添加一个apply,我会得到一个错误错误:[$rootScope:inprog]$digest已经在进行中了
。当我在createMovie.create
函数中使用它时,也会出现同样的错误。
var init = function(){
movieService.loadMovies().then(function(response) {
$scope.movies = response.data;
});
}
init();