Question

我遇到了stats控制器的异步问题。我有一个查询数据库并返回对象的控制器。在这个控制器中，我使用过滤器来获取具有Facebook平台的过滤器，并将其放入$rootScope.facebookObjects。

第一个控制器：

    app.controller('statsCtrl', function ($scope, $log, $http, $timeout, $filter, Data, $rootScope) {
    Data.get('stats').then(function(data){
        $scope.stats = data.data;
        $scope.currentPage = 1; //current page
        $scope.filteredItems = $scope.stats.length; //Initially for no filter  
        $scope.totalItems = $scope.stats.length;
        $scope.list_pages = [
                {
                    id: '5',
                    name: '5'
                }, {
                    id: '10',
                    name: '10'
                }, {
                    id: '20',
                    name: '20'
                }, {
                    id: '50',
                    name: '50'
                }, {
                    id: '100',
                    name: '100'
                }
            ];
        $scope.maxSize = 5;

        $rootScope.facebookObjects = $filter('filter')($scope.stats, { platform: "facebook" });
        $rootScope.twitterObjects = $filter('filter')($scope.stats, { platform: "twitter" });
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };

});

我有第二个控制器使用$rootScope.facebookObjects填充图表。问题是我需要等到$rootScope.facebookObjects有一个值。目前我的控制台日志显示未定义。我正在研究承诺，但我不确定哪个控制器使用它以及如何正确使用它。

第二名管制员：

app.controller("PieCtrl", function ($scope, $rootScope, $timeout, $log) {
    $log.log('facebook - '+$rootScope.facebookObjects.length);
});

Answer 1

$rootScope.$watch('facebookObjects', function(newValue, oldValue) {
  //do your job
});

虽然您可以使用$ watch来观看它，但我不确定它是在控制器之间共享数据的好方法，甚至更多的数据是acync。

Answer 2

我使用angular factory为您创建了example：

HTML：

<div ng-app="jsfiddle">
    <div ng-controller="MainCtrl">
        Data: {{data}}<br>
    </div>

    <div ng-controller="SecondCtrl">
        Data: {{data}}<br>
    </div>
</div>

角：

var app = angular.module('jsfiddle', []);

app.factory('myService', function($http) {
  return {
    async: function() {
      return $http.get('https://api.myjson.com/bins/1v21f');  
    }
  };
});

app.controller('MainCtrl', function( myService,$rootScope, $scope, $timeout) {
    $scope.data = "oron";
  myService.async().then(function(d) { 
    $timeout(function() {
                $rootScope.data = d;
            }, 1000);

  });
});

app.controller('SecondCtrl', function($rootScope, $scope, $timeout) {
    $scope.test = $rootScope.data;

});

MainCtrl正在调用myService并将回复存储在$rootScope上。然后当值准备就绪时，它将更新SecondCtrl上的数据对象。

Answer 3

谢谢大家的帮助。以下是我根据你的答案提出的建议。

第一控制器：

main

第二名管制员：

$scope.facebookObjects = $filter('filter')($scope.stats, { platform: "facebook" });
$scope.twitterObjects = $filter('filter')($scope.stats, { platform: "twitter" });

$scope.$broadcast('update_chart_controller', { 
    fb: $scope.facebookObjects, 
    tw: $scope.twitterObjects 
});

有角度的承诺

3 个答案: