Fail to catch event when call directive method from controller in Angular

Question

I try to call directive method from controller by using $broadcast.

But I catch event only if press on button twice.

Do I miss something?

Here is snippets of code:

HTML

<div ng-controller="MainCtrl">
    <test-dir name="{{test}}"></test-dir>

    <select ng-model="broadcastTo" ng-options="x as x for x in ['test1', 'test2', 'test3']"></select>
    <button ng-click="broadcastToSelectedChild()">test</button>
  </div>

JS

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {



  // a method that broadcasts to a selected child.
  $scope.broadcastToSelectedChild = function (){
    $scope.test = $scope.broadcastTo;

    console.log('call-' + $scope.test);

    $scope.$broadcast('call-' + $scope.test);
  };
});

app.directive('testDir', function (){
  return {
    restrict: 'E',
    scope: {
      'name': '@'
    },
    template: '<div>{{name}} called: {{called}}</div>',
    link: function(scope, elem, attr) {

      scope.called = false;



      //set up the name to be used as the listened to event.
      var eventOn;
      scope.$watch('name', function(v) {
        console.log('listen ..','call-' + scope.name);
        if(eventOn){
          eventOn();
        }
        eventOn = scope.$on('call-' + scope.name, function (){
            alert(scope.name);
          });
      });
    }
  };
});

Took example from: HERE

Thanks,

Khanh TO · Accepted Answer · 2014-01-29 13:25:52Z

1

It does not work because you bind your directive scope's name to your controller scope's test, but ng-model on the <select> binds to broadcastTo. When you select a value from the <select>, test is not updated and $watch inside your directive does not fire to attach the event handler.

Try:

<test-dir name="{{broadcastTo}}"></test-dir>

DEMO

In your code, you have to click twice because the first click updates test and causes $watch to fire to attach the event handler:

$scope.test = $scope.broadcastTo;

And the second click will be able to handle the event broadcast from your controller.

answered Jan 29, 2014 at 13:25

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

2 Comments

snaggs Over a year ago

Right, it should work. The idea is that broadcastToSelectedChild method called as modal callback. I posted simple version of code. I need somehow to make it works with $scope.test = $scope.broadcastTo;

Khanh TO Over a year ago

@fessy: I don't know what you're trying, but you need to ensure that when you select an item from the list, you need to update the test accordingly to fire the $watch. You could try $scope.$watch("broadcastTo" in your controller to update the test

Collectives™ on Stack Overflow

Fail to catch event when call directive method from controller in Angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related