angularjs $broadcast not reflecting values on view

Question

When I add a $broadcast in $rootScope and catch it to other controller, it is not reflecting any value to view. Example:

// on first ctrl.
controller('firstCtrl', ['$scope','$location', '$rootScope', function($scope, $location, $rootScope) {
    $scope.myFunc = function() { 
        $rootScope.$broadcast('someEvent');
        $location.path('/users');
    }
}])


// On Users Page.
.controller('usersCtrl', ['$scope','$rootScope', function($scope, $rootScope) { 
    $scope.dataFilter = {};
    $rootScope.$on('someEvent', function(event, b) {
        $scope.callOnBroadcast();
    });
  
    // call this function on broadcast.  
    $scope.callOnBroadcast = function() {
      $scope.dataFilter = {
        types: [
          {key: 'tags',     val: 'Collections'},
          {key: 'prices',   val: 'Price'},
          {key: 'ratings',  val: 'Rating'},
          {key: 'designers',val: 'Designer'}
        ],
        data: {tags: [], prices: [], ratings: [], designers: []}

      };

      $scope.$apply();


    };
}])

<h4 data-ng-repeat="ftr in dataFilter.types">  
  {{ftr.val}}
</h4>

When I Use MyFunc function on firstCtrl, it will redirect me to user's page, also broadcast function run. On users page, I Use $scope.callOnBroadcast() when broadcast is on, but it is reflecting any change on view page even I use $scope.$apply(). Where am I wrong ?

do $rootScope$broadcast('someEvent'); if controller hierarchy is not there..Please add html to see how your controller hierarchy — Pankaj Parkar
– Pankaj Parkar, Commented Apr 9, 2015 at 5:17
here is no controllers hierarchy, that is why I added $broadcast in $rootScope. — Rajeev
– Rajeev, Commented Apr 9, 2015 at 5:40
oh sorry its a copy paste mistake. I already use $broadcast in $roootScope. — Rajeev
– Rajeev, Commented Apr 9, 2015 at 5:50

Pankaj Parkar · Accepted Answer · 2015-04-09 07:01:02Z

2

Your both the controller don't have any hierarchy that's why you need to $broadcast the event in $rootScope rather than scope,

Your problem is you are broadcasting event before registering listener event. After that you are doing $location.path('/users'), which load user template with usersCtrl.

I think you should do redirection 1st and then broadcast the event in $rootScope with certain timeout inorder to make available the usersCtrl

Code

// on first ctrl.
controller('firstCtrl', ['$scope','$location', '$rootScope',  '$timeout',function($scope, $location, $rootScope, $timeout) {
    $scope.myFunc = function() { 
        $location.path('/users');
        $timeout(function(){
          //boardcast will available to every listener
          $rootScope.$broadcast('someEvent'); 
        },1000);
    }
}]);

Make sure the other listener code should be register before broadcasting the event.(Below listener should be registered before broadcasting).

$scope.$on('someEvent', function(event, b) {
    $scope.callOnBroadcast();
});

For making it more better solution, you could use resolve of $routeProvider

edited Apr 9, 2015 at 7:01

answered Apr 9, 2015 at 5:47

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pankaj Parkar Over a year ago

could you please confirm that controller has been loaded or not before broadcasting event

Rajeev Over a year ago

yes controller is loading and if I add alert in '$scope.callOnBroadcast()', It is reflecting.

Pankaj Parkar Over a year ago

@Rajeev no...your code clearly says that you are broadcasting event then doing $location.path('/users'); which is wrong..do $location.path('/users'); first and then do braodcast

Rajeev Over a year ago

I updated my code like you mentioned above but it is not working.

tpie Over a year ago

So basically the issue was that your controller wasn't instantiated :) Just giving it a second to load before you broadcast is the trick.

Reena · Accepted Answer · 2015-04-09 05:27:53Z

0

Have a look at this "How Scope.$broadcast() Interacts With Isolate Scopes In AngularJS" http://www.bennadel.com/blog/2725-how-scope-broadcast-interacts-with-isolate-scopes-in-angularjs.htm

It will be helpful to you.

answered Apr 9, 2015 at 5:27

Reena

1,1199 silver badges17 bronze badges

Comments

tpie · Accepted Answer · 2015-04-09 05:59:52Z

0

You can inject $rootScope into your controllers and broadcast on that level. You can see the $broadcast taking effect here: http://plnkr.co/edit/ySrEU4accdgeY7iJhdZi?p=preview

app.controller('firstCtrl', ['$scope', '$rootScope','$location', function($scope, $rootScope, $location) {
$scope.myFunc = function() { 
    $rootScope.$broadcast('someEvent');
    $location.path('/users');
};

}])


// On Users Page.
.controller('usersCtrl', ['$scope', '$rootScope', function($scope, $rootScope) { 
$scope.dataFilter;
$rootScope.$on('someEvent', function(event, b) {
    $scope.callOnBroadcast();
    //$scope.dataFilter = 'test';
});

// call this function on broadcast.  
$scope.callOnBroadcast = function() {
  $scope.dataFilter = {
    types: [
      {key: 'tags',     val: 'Collections'},
      {key: 'prices',   val: 'Price'},
      {key: 'ratings',  val: 'Rating'},
      {key: 'designers',val: 'Designer'}
    ],
    data: {tags: [], prices: [], ratings: [], designers: []}

  };

  //$scope.$apply();  <- I don't think is necessary


};

}])

answered Apr 9, 2015 at 5:59

tpie

6,2393 gold badges24 silver badges41 bronze badges

3 Comments

Rajeev Over a year ago

The code is working if I use $rootScope.dataFilter instead of $scope.dataFilter. I don't know why this happen. As view has "usersCtrl", so their is no need to add $rootScope.

tpie Over a year ago

Just to confirm - the usersCtrl is already instantiated when you call the function, right?

Rajeev Over a year ago

right, ctrl instantiated first and then function call

Collectives™ on Stack Overflow

angularjs $broadcast not reflecting values on view

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related