ps0604 ps0604 - 1 month ago 20
AngularJS Question

Getting HTML markup in directive element parameter

In this plunk I have a directive that is declared with an UL element.

<directive>
<ul>
<li id="0">xxx 0</li>
<li id="1">xxx 1</li>
<li id="2">xxx 2</li>
</ul>
</directive>


I'm trying to retrieve these by analyzing the
element
parameter in the directive link function, but I only get them in the innerHTML. What I need is to get the id and text of the
li
elements as DOM. Any ideas?

angular.module('app', []);
angular.module('app').directive('directive', function() {
var directive = {};
directive.restrict = 'AE';
directive.scope = true;
directive.link = function(scope, element, attrs) {
console.log(element)
};
return directive;
});

Answer

Since you have element in directive you dont have to use querySelector,

you can directly do,

directive.link = function(scope, element, attrs) {
        console.log(element.find("ul")[0].children);
};

DEMO