AngularJS - 在 http 请求后刷新视图,$rootScope.apply 返回 $digest 已经在进行中 [英] AngularJS - refresh view after http request, $rootScope.apply returns $digest already in progress
问题描述
我只是想在我的应用程序启动时加载数据.但是,视图加载速度比 http 请求快(当然).我想在我的数据正确加载后刷新我的视图,因为该数据定义了我的视图.
I am simply trying to load data when my app starts. However, the view loads faster than the http request(of course). I want to refresh my view once my data has been properly loaded because that data defines my view.
我在工厂内部尝试了 $rootScope.apply,我在那里做我的 http 请求,我还尝试直接在我的控制器中使用 $scope.apply 再次执行 http 请求,但没有一个工作,因为他们都给了我$digest 已经在进行中"
I've tried $rootScope.apply from inside the factory where I do my http request, and I also tried directly doing the http request in my controller again with $scope.apply, and neither one worked as they both gave me "$digest already in progress"
知道如何设置代码以在数据加载时刷新视图吗?我将有几个不同的 http 请求,我想知道如何正确设置它们!我真的很感激任何输入!
Any idea how can I set up my code to make my views refresh on data load? I will be having several different http requests and I would like to know how to set them up properly! I would really appreciate any input!
这是我正在使用的一些代码.
Here is some of the code I am working with.
app.factory('HttpRequestFactory', function($http, $q) {
var HttpRequestFactory = {
async: function(url, params) {
var deferred = $q.defer();
$http({
url: url,
method: post,
params: params
})
.success(function(data, status, headers, config) {
deferred.resolve(data);
})
.error(function(data, status, headers, config) {
deferred.reject("An error occurred");
});
return deferred.promise;
}
};
return HttpRequestFactory;
});
工厂
function initializeAll(){
HttpRequestFactory.async('../api', {action: 'getall'}).then(function(data) {
//$rootScope.$apply(function () {
allData = data;
//});
angular.forEach(allData, function(value, index){
console.log('Voala!');
});
});
}
控制器调用工厂函数 initializeAll()
Controller calling the factory's function initializeAll()
app.controller("MainController", ["$scope", "$rootScope","MyFactory",
function($scope, $rootScope, MyFactory){
MyFactory.initializeAll();
}
]);
推荐答案
调用 $apply
(几乎)总是错误的做法.您应该调用它的唯一时间是在角度"方法之外触发了更改;在这里,由于触发器发生在一个有角度的 $http
请求中,你不能调用 $apply
因为它已经被 $http代码>块.相反,您要做的是
$watch
.
Calling $apply
is (almost) always the wrong thing to do. The only time you should ever be calling it is if you've triggered a change outside of an 'angular' method; here, since the trigger occurs in an angular $http
request, you can't call $apply
because it's already being done at that moment by the $http
block. Instead, what you want to do is $watch
.
这将让您观察一个对象并在它发生变化时进行更新.我假设您的视图基于 allData
并且您希望它立即更新;如果您使用的是 ng
方法,那么手表会自动为您设置,不需要更多的工作.如果您自己在控制器中使用 allData
,则可以在该控制器中编写手表,如下所示:
This will let you watch an object and update whenever it changes. I assume that your view is based on allData
and you want it to update immediately; if you're using an ng
method, then the watch is automatically setup for you and no more work should be needed. If you're using allData
yourself inside a controller, you can write the watch in that controller like this:
$scope.$watch(function thingYouWantToWatch(){
return <accessor call to allData here>;
},
function whatToDoOnChange(newValue, oldValue){
$scope.myCoolThing = newValue; //this is the newValue of allData, or whatever you're watching.
}
);
这篇关于AngularJS - 在 http 请求后刷新视图,$rootScope.apply 返回 $digest 已经在进行中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!