在工厂的GET请求之后,AngularJs $ scope不会更新 [英] AngularJs $scope doesn't update after a GET request on a factory
问题描述
我一直在尝试AngularJS进行实验项目,我遇到了这个问题。
在我的html中,我想显示一个项目列表
I have been trying AngularJS for a experimental project and I came along with this problem. In my html I want to display a list of items
Index.html
<h1>Some list</h1>
<div ng-controller="datlist">
<div ng-repeat="item in items">
<div>Item description: {{item.description}}</div>
<div>Item name: {{item.name}}</div>
</div>
</div>
起初我使用一个简单的控制器来获取信息并使用这个更新视图:
At first I was using a simple controller to get the information and update the view just using this:
controllers.js(原始)
function datlist($scope,$http){
$http({method: 'GET', url: 'http://localhost:61686/getdatlist?format=json', headers: {'Access-Control-Allow-Origin': 'localhost:*'}}).
success(function(data, status, headers, config) {
$scope.items=data.itemsToReturn;
console.log(data);
}).
error(function(data, status, headers, config) {
console.log("fail");
});
}
这个工作得很好我可以得到清单项目。同时,通过更改我的结构以使用工厂发出相同的请求并将其绑定到$ scope.items它不起作用。我尝试了很多$ watch的变种,但是我无法更新$ scope.items。我发现了一些关于$ apply的内容,但我真的无法理解如何使用它。
This was working pretty well and I could get the list of items. Whilst, by changing my structure to use a factory to make the same request and bind it to $scope.items it doesn't work. I tried a lot of variations of $watch but I couldn't get it to update $scope.items. I found something about $apply but I really can't understand how to use it.
controllers.js(新的)
var datModule = angular.module('datModule',[]);
datModule.controller('datlist', function ($scope, datfactory){
$scope.items = datfactory.getlist();
$scope.$watch($scope.items, $scope.items = datfactory.getlist());
});
datModule.factory('datfactory', function ($http){
var factory = {};
factory.getlist = function(){
$http({method: 'GET', url: 'http://localhost:61686/getdatlist?format=json', headers: {'Access-Control-Allow-Origin': 'localhost:*'}}).
success(function(data, status, headers, config) {
console.log(data.itemsToReturn); //I get the correct items, all seems ok here
return data.itemsToReturn;
}).
error(function(data, status, headers, config) {
console.log("fail");
});
}
return factory;
});
任何关于此的想法都会很棒。
PS:我发现很多帖子都在讨论这个问题,但没有一个帖子能帮我找到完整的解决方案。
Any ideas about this will be great. PS: I found a lot of posts talking about this issue but none of them helped me to get a full solution.
谢谢
推荐答案
使用手表有点难看。
试试这个:
datModule.factory('datfactory', function ($http, $q){
this.getlist = function(){
return $http.get('http://localhost:61686/getdatlist?format=json',{'Access-Control-Allow-Origin': 'localhost:*'})
.then(function(response) {
console.log(response); //I get the correct items, all seems ok here
return response.data.itemsToReturn;
});
}
return this;
});
datModule.controller('datlist', function ($scope, datfactory){
datfactory.getlist()
.then(function(arrItems){
$scope.items = arrItems;
});
});
这就是你如何使用promise来处理异步问题。
This is how you use promises for async matter.
更新(2015年1月15日):现在更时尚!
UPDATE (15.01.2015): Now even sleeker!
这篇关于在工厂的GET请求之后,AngularJs $ scope不会更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!