OnClick `ngClick` of icon we are `broadcasting` the `refresh` event. But Its not working

Question

I am using angular and jquery float to draw a graph. Graph is canvas element.

I want to re-draw a canvas on click of some icon.. clicked handler is toggleSideMenu. OnClick ngClick of icon we are broadcasting the refresh event. But Its not working.

If I will put debbugger inside the function it works..

My JS Code-

 this.toggleSideMenu = function () {
    //  this.setSideMenuState(!this.sidemenu);
    $("#sidemenu-canvas").toggleClass("toggled");
    $timeout(function () {
      $rootScope.$broadcast("refresh");
    }, 50);
    $timeout(function () {
      $rootScope.$broadcast("render");
    }, 50);
  };

Instead of giving -

$timeout(function () {
      $rootScope.$broadcast("refresh");
    }, 50);

I have given

$rootScope.$broadcast("refresh");

I have listner also-

$scope.$on('refresh', function() {
         if(!$scope.isDRPDisabled) {
           $scope.refresh();

      });

But its not working. Please help me..

Possible duplicate of [$rootScope.$broadcast not working](http://stackoverflow.com/questions/35644084/rootscope-broadcast-not-working) — ngrj, Jul 22 '16 at 05:50

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

When you use $broadcast or $emit. You should have $rootScope.$on to listen to that event. For more please follow the below link. Please consider searching in stack over flow before posting any question.

$rootScope.$broadcast not working

edited May 23 '17 at 11:44

Community

1
1

answered Jul 22 '16 at 05:49

ngrj

337
1
3
12

Note that OP broadcasts on $rootScope, thus should have a $rootScope.$on. – Guinn Jul 22 '16 at 07:21

Guinn · Answer 2 · 2016-07-22T07:26:12.893

You broadcast on $rootScope, and your listener is on $scope. These are two different "scopes" and can't listen to eachother's broadcasts. Unless you want a different controller to catch your refresh event, I suggest keeping the broadcast within the $scope. Like:

this.toggleSideMenu = function () {
    //  this.setSideMenuState(!this.sidemenu);
    $("#sidemenu-canvas").toggleClass("toggled");
    $timeout(function () {
      $scope.$broadcast("refresh");
    }, 50);
    $timeout(function () {
      $scope.$broadcast("render");
    }, 50);
};

But otherwise your listener should be $rootScope as well.

OnClick `ngClick` of icon we are `broadcasting` the `refresh` event. But Its not working

2 Answers2