CODEWITHSUNDEEP
javascriptjqueryangularjs
Jared Tomaszewski
Jared Tomaszewski

Reputation: 803

How to select an element with a specific id from a directive's linking function's 'element' parameter, using jQuery rather than angular's jqLite?

Here's the template of the directive:
(if I understand it right, this is what becomes available from the 'element' parameter of the linking function, no?)

template: '<div class="panel">' +
  '<div id="lh" title=""></div>' +
  '<div id="rh" title=""></div>' +
'</div>',

I've read that jQuery takes precedence over jqLight, when it is loaded prior to angular. Bearing that in mind, here's my attempt to select the div marked with 'lr' id from the linking function and to set its 'title' attribute:

link: function(scope, element, attrs) {
  element.$('#link').attr("title", attrs.title);
}

This doesn't work, as if there were no jQuery present.
How to do it the 'Angular' way, while taking advantage of jQuery?
Thank you for your time.
Jared

Upvotes: 0

Views: 90

Answers (2)

TheSharpieOne
TheSharpieOne

Reputation: 25726

In jQuery you can optionally set the root from where it start looking.

$(selector[, root])

In your case it would be 

$("#lr", element)

Also it is worth noting that there should only be one element with a particular ID on the page at any given time, so $("#lr") should also work.

Upvotes: 1

zs2020
zs2020

Reputation: 54542

Basically you need to get the HTML of the template and then convert it using jqLite (or jQuery) object.

link: function (scope, element, attrs) {
    var html = element[0].innerHTML;
    var e = angular.element(html).find("#lr").attr('title', 'ABC');
    element.replaceWith(e);
}

Upvotes: 0

Related Questions