Javascript 安格拉斯工厂

我对angularjs有点陌生，我正在尝试创建一个小的电影数据库。这是我第一次使用工厂，我想确定这是正确的方法，以及如何在另一个功能中使用工厂，如下图所示

我希望这个工厂只运行一次，这样我就可以在我喜欢的任何控制器中使用它。但是，我不明白为什么不能使用下面示例中的$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
};
}]);

My index.html看起来像：

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

{{movies.title}

这是可行的，我有一个从data.json获得的movies.title列表

---

但是，当我尝试从函数getMoviesbyGene内部控制台.log$scope.allMovies时，我会得到一个emtpy数组。

getMovies具有异步函数$http.get，因此您需要像这样使用回调

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

app.factory('moviesService', ['$http', function($http) {
    var getMovies = function (callback) {

        $http.get('js/data.json').success(function(data) {
            var allMovies = [];

            angular.forEach(data, function(movies) {
                allMovies.push(movies);
            });

            callback(allMovies);
        })
    }

    return {
        getAllMovies: getMovies
    };
}]);

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

    $scope.getMoviesByGenre = function () {
        moviesService.getAllMovies(function (allMovies) {
            console.log(allMovies);    
        });
    };
}])

---

或者使用

我想你不想在工厂里使用

getMovies（）

getMovies（）

callback应该返回ajax请求结果，而不是因为异步ajax调用而推送到其他变量

var getMovies = function() {
  $http.get('js/data.json').success(function(data) {
       return data; 
  });
}

return {
    getAllMovies: getMovies
};

---

这是因为服务中的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();
  });
});

---

你说你不能使用是什么意思？你有错误吗？那么。。什么时候调用

$scope.getMoviesByGenre

？是不是因为getMovies还没有解析，所以得到了一个空数组？嗨！我编辑了原始问题，得到了一个emtpy数组（仅从函数内部）。我希望这会有所帮助。之所以会出现这种情况，是因为$http调用尚未返回。问题可能是在完成对

js/data.json

的ajax请求之前调用函数

getMoviesbyGene

，谢谢！这就是我要找的！