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();