[英]AngularJS factory
我对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
};
}]);
我的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时,我得到了一个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()
。 由于异步ajax调用, getMovies()
回调应返回ajax请求结果,而不将其推入其他变量。
var getMovies = function() {
$http.get('js/data.json').success(function(data) {
return data;
});
}
return {
getAllMovies: getMovies
};
这是因为服务内部的http请求是异步执行的。 为了克服这个问题,您可以使用$ watchCollection函数,该函数将在moviesService中修改所有movie数组后执行:
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();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.