设置时AngularJS获取rootScope变量

Question

在我正在开发的项目中，我们在$rootScope上有一个名为events的变量。 将其注入控制器后，可以使用$rootScope.events在控制器中访问它。

该服务可能需要一些时间才能在$rootScope变量上设置事件。 现在，我要添加一个新功能，该功能需要该变量的第一个事件的ID。 问题是，它在设置$rootScope.events之前被调用。 设置$rootscope.events后，我不知道如何在控制器中调用该方法。 我曾经用过$watch ，但是，它似乎不适用于此变量。 我试过的代码：

$scope.$watch('$rootScope.events', function() {
    if ($rootScope.events.length > 0) {
        getDetails(); // function I want to call after $rootscope.events is set
        $log.debug($rootScope.events); // debugging line
    }
});

我添加了$rootScope.events.length > 0以避免它陷入无限循环。 不知道这是否必要。 我需要添加此功能的解决方案吗？ 像这样的手表？ 还是我做错了什么？

我认为您不需要更多的代码，所以我已经在我的控制器中注入了$scope和$rootScope ，然后将$log.debug()与set变量一起调用，所以我已经添加到了这篇文章中。 当前，它返回一个空变量。 如果我错了，请在评论中让我知道。

Answer 1

已经有一段时间了，但是我认为您想要这样：

$rootScope.$watch('events', function() {
    if ($rootScope.events.length > 0) {
        getDetails(); // function I want to call after $rootscope.events is set
        $log.debug($rootScope.events); // debugging line
    }
});

events是$rootscope上的值，但$rootscope.events 不是 $scope上的值。

但是，为了避免使$rootscope混乱，您应该使用：

$scope.$watch('$root.events', function() {
    var events = $scope.$root.events;
    if (events.length > 0) {
        getDetails(); // function I want to call after events is set
        $log.debug(events); // debugging line
    }
});

或者简单地：

$scope.$watch('$root.events', function(newValue, oldValue) {
    if (newValue.length > 0) {
        getDetails(); // function I want to call after events is set
        $log.debug(newValue); // debugging line
    }
});

Answer 2

RootScope文档

监视在字符串（作用域变量）或函数上。

$scope.$watch(function() {
   return $rootScope.events;
}, function() {
   console.log($rootScope.events);
}, true);

Answer 3

您可以使用承诺，当事件准备就绪时，事件服务将解决该承诺，而不用监视一旦发生的事情。

Event Service : ($rootScope & $q injected)
   // in constructor : 
     this.deferred = $q.defer();
     $rootScope.eventPromise = deferred.promise;


    // in a setup fonction or even within the constructor
    setupEvent : function(){
       .. doing some stuff ..
        .. somewhere in a asynchronous call back : 
            $rootScope.events =... //setup events
            this.deferred.resolve();// or me.deferred using var me=this if some closure trouble

       .. somewhere else if it fails ..
            this.deferred.reject();
    }

现在，确保在加载任何控制器之前它将运行：

angular.run(['EventService', function(EventService){
    // if you do everything in the constructor let the angular.run and don't run any code, 
    // this will make sure your events will start loading before angular will resolve the current routes.
    EventService.setupEvent();
}]); 

现在使用它：

$rootScope.eventPromise.then(function(){
    $rootScope.events // we're safe here.
});