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.