Angular promises

Question

I am running into an asynchronous issue with my stats controller. I have a controller that queries the db and returns the objects. In this controller I use the filter to get the ones with the platform Facebook and I put this into $rootScope.facebookObjects.

First controller:

    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;
    };

});

I have a second controller that uses the $rootScope.facebookObjects to populate the chart. The problem is I need to wait until the $rootScope.facebookObjects has a value. Currently my console log shows undefined. I am looking into promises but I am a little unsure which controller to use it in and how to properly use it.

Second Controller:

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

If you want to share data between controllers don't attach the data onto `$rootScope`, use a service instead. — Ankh, Apr 07 '16 at 13:54
Try [something like this](http://stackoverflow.com/a/12513509/2043204) — Ankh, Apr 07 '16 at 13:57
These are basic enough questions that you may want to take a step back and run through some tutorials first -- the Q&A format is poorly suited to this sort of thing. I learned a lot from egghead.io; their lesson on Promises is here: https://egghead.io/lessons/angularjs-promises (though now I see it's out of date, sorry, perhaps someone else can suggest a more current tutorial) — Daniel Beck, Apr 07 '16 at 13:57
you can try like this too to transfer data between two controller: http://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers — Dark Army, Apr 07 '16 at 14:06

score 0 · Answer 1 · answered Apr 07 '16 at 14:02

0

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

while you could use $watch to watch it, but i'm not sure it's a good way to share data between the controllers, and even more data is acync.

answered Apr 07 '16 at 14:02

user13136

74
2

score 0 · Answer 2 · answered Apr 07 '16 at 14:25

I have created an example for you with angular factory:

HTML:

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

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

Angular:

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 is calling myService and store the response on the $rootScope. then the when the value is ready it will update the data object on the SecondCtrl.

score 0 · Accepted Answer · answered Apr 07 '16 at 15:16

Thank you everyone for your help. Here is what I came up with based off of your answers.

First Controller:

$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 
});

Second Controller:

$scope.$on("update_chart_controller", function(event, args) {
   $scope.data = [args.fb.length, args.tw.length];
});

Angular promises

3 Answers3