Question

我有两个模板，_frontpage.html和_movieOverview.html。我在我的application.html.haml上注入了两个模板，如下所示：

%div{"ui-view" => ""}
%div{"ng-controller" => "searchCtrl", "ng-include" => "'assets/angular-app/templates/_movieOverview.html.haml'", :id => "container_frontpage"}

我已经使用router-ui创建了一个家庭状态，其中_frontpage.html被我的searchCtrl注入。

$stateProvider
  .state('home', {
    url: '',
    controller: 'searchCtrl',
    templateUrl: '../assets/angular-app/templates/_frontpage.html',
  })

在我的_frontpage.html模板中，我有一个搜索字段。用户可以搜索电影标题并创建海报列表。然后他们可以点击海报将该电影添加到数据库中。 _movieOverview.html会显示所有结果。

.movie_container{"ng-repeat" => "movie in movies | orderBy:'release_date' | filter:{user_id: user_id} "}

我的问题是，当用户向数据库添加新电影时，_movieOverview.html模板不会更新。只有当我刷新页面时才会看到新电影的添加。

但是当我在_movieOverview.html模板中注入_frontpage.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.')
        }
      })

重要的是.then(init);引用了这个，

  var init = function(){

    movieService.loadMovies().then(function(response) {
      $scope.movies = response.data;
    });

  }
  init();

AngularJS不会更新模板

0 个答案: