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:使用$watch.

调用 $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.

$scope.$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屋！