angularjs directive not responding to event binding in link function

Question

I have two simple element (restrict: "E") directives, incButtonOne and incButtonTwo, that track and display the number of times it has been clicked. They both implement local controllers and have isolate scope. The two directives accomplish the same thing but with slightly different implementations:

incButtonOne's template includes a ng-click directive in the tag to facilitate the click counting by calling a function in the directive's controller
incButtonTwo implements a link function to register a click event handler that calls the incrementing function in the directive's controller

They both work. Kind of. The problem is that incButtonTwo's displayed value is only updated after incButtonOne is clicked, i.e. the value is in fact updated (this can be confirmed by uncommenting the alert statement on line 45) but it's not being displayed until some other action is performed.

I would just like to understand why this is happening and how to fix it. Thanks!

Tip-Sy · Accepted Answer · 2014-06-25 11:54:53Z

1

As Stanislav Demydiuk said, you must use $apply() to get your binding to update. And using your function "increment", here is what you get:

element.on("click", function() {
     scope.$apply(increment);
});

Note: In your example, if the click on the first button makes your second button update, it's because of ng-click event, which is wrapped in $scope.$apply() (see this article).

answered Jun 25, 2014 at 11:54

Tip-Sy

80810 silver badges18 bronze badges

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

Comments

Stanislav Demydiuk · Accepted Answer · 2014-06-25 11:31:55Z

0

When you manually register event handler you must manually call scope.$apply() function like this

link: function(scope, element) {
  element.on('click', function() {
     scope.$apply(function() {
        scope.count++;
     });
  });
}

answered Jun 25, 2014 at 11:31

Stanislav Demydiuk

1413 bronze badges

Collectives™ on Stack Overflow

angularjs directive not responding to event binding in link function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related