1

I have a jQuery event on an element in a directive’s link function. I want to modify a scope variable in that event callback. It’d not working- the template that renders that variable never updates:

joyableApp.directive('foobar', [function() {
  var FoobarLink = function(scope, element, attrs){
    scope.foo = 'bar';
    element.click(function(){
      console.log("clicked!");
      scope.foo = 'clicked_result';
    });
  };
  return {
    template: '<div>foo = {{foo}}</div>',
    scope: {},
    link: FoobarLink
  }
}]);

In this example, I’m trying to update scope.foo when the directive element is clicked. However, when I run this and click the element, the template is not updated from bar to clicked_result. I suspect I’m missing something fundamental about how link and scope work here.

Some unrelated backstory, just in case it helps: I’m trying to create a directive that would go on an <input> field. When you focus on this input field, it’ll display a popup tooltip. So the interface to use the directive would look like <input input-tooltip content=‘some tooltip content here’>. However, to do that, I need the directive to listen on the root element for focus events. The only way I can find to do that is to use a jQuery event on the element passed in to the link function. However, in the callback for the focus event on that event, I can’t seem to successfully modify scope variables.

3 Answers 3

1

$scope.foo will not be refreshed until Angular runs into digest loop, which is the so called dirty check. In directive, you need to manually trigger a digest loop youself, like below

scope.$apply(function () {
  scope.foo = 'clicked_result';
});

But you might run into Error: $digest already in progress, so you'd better use evalAsync or applyAsync to trigger a safe digest cycle,like

scope.$evalAsync(function () {
  scope.foo = 'clicked_result';
});
1

wrap the DOM manipulation in a $timeout.

  element.click(function(){
    console.log("clicked!");
    $timeout(function () {
      scope.foo = 'clicked_result';
    },0);

  });

The $timeout will cause a safe digest cycle to begin. Don't forget to inject $timeout:

joyableApp.directive('foobar', ['$timeout', function($timeout) {

Hope this helps.

1
  element.click(function(){
    console.log("clicked!");
    scope.$apply(function () {
      scope.foo = 'clicked_result';
    });

  });

Using $apply is appropriate here and doesn't require injection of $timeout. In my experience, $timeout is useful only in situations where you modify the DOM in the link function and need to wait for angular to compile the added elements.

2
  • The danger in using apply is you can't verify angular is not in a digest cycle when using it, unless you use $$phase, which is not supposed to be used as it's a 'private' property. Mishko has offered the $timeout as the best-practice way of doing a safe apply. Jan 29, 2015 at 6:50
  • There is no "danger" in this case, and the best practice is in fact to use $apply. Angular itself uses $apply for all but 2 of the 16 ng-{{event}} directives, and use evalAsync in those two cases primarily to address browser differences. Mishko's advice applies primarily to situations where you're not sure whether you are in a digest cycle or not, which almost invariably means you've already fallen victim to an anti-pattern. The only times I've found $timeout truly necessary were when trying to wrap jQuery plugins into directives (an anti pattern in an of itself). Jan 29, 2015 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.