等待功能在Angular JS中完成

Question

I have the following situation: When my app first runs, in the .run function, I issue an http request to get a list of "monitors". Once received, it populates a monitors array in a service. This service is used by many controllers to share data. This service is called ZMDataModel. ZMDataModel offers a function called isMonitorsLoaded(). When this returns 1, I know the monitors array is populated (and that the http call is complete)

Now, I have a page called Monitors, the controller for which is zmApp.MonitorCtrl, shown below. What I need to do, in this MonitorCtrl is to basically, right at the start, do an equivalent of:

while (ZMData.isMonitorsLoaded()!=1);

Now I obviously can't do that because it locks my browser up, and the browser never gets a chance to set isMonitorLoaded to 1 in the first place, so it becomes an endless loop.

I understand I need to put in a timeout somehow, but can't quite follow what I need to do in the controller. My controller code is below:

 angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function($scope, $http, ZMHttpFactory, ZMDataModel) { $scope.monitors = []; console.log("***Waiting for Monitors to load before I proceed"); // I can't do a tight loop waiting for ZMDataModel.isMonitorsLoaded // so some timeout? $scope.monitors = ZMDataModel.getMonitors(); console.log("I GOT " + $scope.monitors); $scope.doRefresh = function() { console.log("***Pull to Refresh"); $scope.monitors = []; ZMHttpFactory.getMonitors().then(function(data) { $scope.monitors = data; $scope.$broadcast('scroll.refreshComplete'); console.log("I GOT " + $scope.monitors); }); }; }); 

Answer 1

You can use $rootScope.$emit('eventName') which works like a broadcast of events for anyone who is subscribe to them whit $rootScope.$on('eventName') :

// In your monitor loaded method:
onload: function(){
  //Here you can pass optional information to the listeners
  // for Example an array of monitor or an object
  $rootScope.$emit('MONITORS_LOADED',{
    monitors: getMonitors()   
  });
}

// In your controller:
angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function($rootScope, $scope, $http, ZMHttpFactory, ZMDataModel) {

  $scope.monitors = [];

  $rootScope.$on('MONITOR_LOADED', function(event, data) {  
    $scope.monitors = data;
    // or 
    // $scope.monitors = ZMDataModel.getMonitors();

    console.log("I GOT " + $scope.monitors);
}

$scope.doRefresh = function() {
  //...
 });
};

});

Answer 2

Why not using a promise which will resolve when your monitor servers is loaded? You can set up your service as:

angular.module('myApp')
    .service ('ZMDataModel', ['$http', function ($http) {

    function MyServices () {
        var _deferred;
        var _isLoading;
        var me = this;

        this.isLoaded = false;

        this.load = function (reload) {

            if (!_deferred || (!_isLoading && reload)) {
                this.isLoaded = false;
                _deferred = $q.defer();

                _isLoading = true;

                // make your call
                $http ({get : 'http://your-site.com'})
                    .then (
                        function success (rawData) {
                            me.isLoaded = true;
                            // parse your data
                            me.monitors = rawData;

                            _deferred.resolve(me);
                        },
                        function fail (error) {
                            _deferred.reject(error);
                            _deferred = null;

                            if (onFail) {
                                me.monitors = [];
                            }
                        }
                    )
                    .finally (
                        function () {
                            _isLoading = false;
                        }
                    );
            }

            return _deferred.promise;
        };
    }

    return MyServices;

    }
]);

Now you can use your service everywhere like this:

angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$scope', 'ZMDataModel', function($scope, ZMDataModel) {

    $scope.monitors = [];


    console.log("***Waiting for Monitors to load before I proceed");
    // I can't do a tight loop waiting for ZMDataModel.isMonitorsLoaded
    // so some timeout?

    ZMDataModel.load ().then (
        function (response) {
            $scope.monitors = ZMDataModel.monitors;
        }
    );

    $scope.doRefresh = function() {
        console.log("***Pull to Refresh");
        $scope.monitors = [];
        ZMDataModel.load (true).then (
            function (response) {
                $scope.monitors = ZMDataModel.monitors;
            }
        );
    };

}]);    

It doesn't matter if an other controller loads the service first. As long as you use the load function without the 'refresh' flag set to true, the service won't load again