javascript - AngularJS 工厂

Question

我是 angularjs 的新手，我正在尝试创建一个小型电影数据库。这是我第一次使用工厂，我想确保这是正确的方法，以及如何在另一个功能中使用这个工厂，如下所示？

我希望这个工厂只运行一次，这样我就可以在我喜欢的任何 Controller 中使用它。但是我不知道为什么我不能在下面的例子中使用 $scope.allMovies 。提前致谢!

var app = angular.module('myApp', []);

app.factory('moviesService', ['$http', function($http) {

  var allMovies = [];

  var getMovies = function() {
      $http.get('js/data.json').success(function(data) {
          angular.forEach(data, function(movies) {
          allMovies.push(movies);         
      });
  })
}

getMovies();

var getAllMovies = function(){
      return allMovies;
}

return {
    getAllMovies: getAllMovies
};

}]);

app.controller('listController', ['$scope', 'moviesService', function($scope,moviesService) {

$scope.genres = ['All', 'Crime', 'Drama', 'Action', 'Comedy'];

$scope.allMovies = moviesService.getAllMovies();

$scope.moviesByGenre = [];

$scope.selectedGenre = 'All';

$scope.getMoviesByGenre = function() {
    // code to get movies by genre goes here
    // cant access $scope.allMovies from here, returns as an empty array
};
}]);

我的 index.html 看起来像:

<div ng-controller="listController">
    <div ng-repeat="movies in allMovies">{{movies.title}}</div>
</div>

这行得通，我有一个从 data.json 中获取的 movies.title 列表。

但是，当我尝试从函数 getMoviesByGenre 的内部 console.log $scope.allMovies 时，我得到一个空数组。

Answer 1

这是因为你服务里面的http请求是异步执行的。为了解决这个问题，您可以使用 $watchCollection 函数，该函数将在您修改 moviesService 中的所有电影数组后执行:

app.controller('listController', ['$scope', 'moviesService', function($scope, moviesService) {
   $scope.genres = ['All', 'Crime', 'Drama', 'Action', 'Comedy'];

   $scope.allMovies = moviesService.getAllMovies();

   $scope.moviesByGenre = [];

   $scope.selectedGenre = 'All';

   $scope.getMoviesByGenre = function() {
       // code to get movies by genre goes here
       // cant access $scope.allMovies from here, returns as an empty array
   };
  $scope.$watchCollection('movies', function (newValue) {
      getMoviesByGenre();
  });
});