angular.js Getting the element from inside $evalAsync in directive

Question

I'm finding that I'm using scope.$evalAsync inside a directive quite a lot. Mainly to do DOM stuff/jquery plugins that need all the template {{vars}} compiled.

I can get at the scope object from inside $evalAsync but not the element. In latest case in question, I'm manipulating an element that gets rendered with an ngRepeat. I'm currently getting the element by composing a jquery selector based on the scope object e.g.

scope.$evalAsync(function (scope) {
    $("#item-" + scope.id).runJQplugin();
})

Although this works, to me it would be more intuitive to be able to do this

scope.$evalAsync(function (scope,element) {
    element.runJQplugin();
})

Am I approaching this right or have I misunderstood something fundamental with directives?

Nikos Paraskevopoulos · Accepted Answer · 2013-11-27 12:08:24Z

1

You always have access to the element from the link and the controller of a directive through the closure scope. So in link function:

link: function(scope, elem, attrs) {
    ...
    scope.$evalAsync(function(scope) {
        elem.runJQplugin();
    });
    ...
},

Controller (you need to specify the special $element dependency):

controller: ["$scope", "$element", function($scope, $element) {
    ...
    scope.$evalAsync(function(scope) {
        $element.runJQplugin();
    });
    ...
}],

answered Nov 27, 2013 at 12:08

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

3 Comments

Keegan 82 Over a year ago

I've tried the top example in my directive and I'm getting ReferenceError: elem is not defined

Nikos Paraskevopoulos Over a year ago

A fiddle/plunk would help.

Keegan 82 Over a year ago

Your right I tried a barebones version in fiddle and it works, yet revisiting my code it definitely doesn't. So there's something weird I'm doing. Oh well I'm using $("#item-" + scope.id) for now.

Collectives™ on Stack Overflow

angular.js Getting the element from inside $evalAsync in directive

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related