Getting HTML markup in directive element parameter

Question

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;
});

do you want this result : plnkr.co/edit/baeGA2wbMuZkQRW5vlY7?p=preview — Natiq
– Natiq, Commented Oct 30, 2016 at 13:22
This seems really backwards. What generates the html in the first place? — charlietfl
– charlietfl, Commented Oct 30, 2016 at 13:58

Sajeetharan · Accepted Answer · 2016-10-30 13:38:28Z

1

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

answered Oct 30, 2016 at 13:38

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

ps0604 Over a year ago

this works, however it doesn't if the directive has a template, any idea how to fix this? see error in console plnkr.co/edit/Wy058Wqh2c7im0LhQQLC?p=preview

Michelangelo · Accepted Answer · 2016-11-01 18:56:09Z

1

Yes you can. If you log the element then you will see that it is an array like object and you need to select the key of the array first in order to get the HTML element.

.directive('directive', function() {

var directive = {};
directive.restrict = 'AE';
directive.scope = true;
directive.link = function(scope, element, attrs) {
    console.log(element[0].querySelector('ul'));//Element is an array like object
};
return directive;

});

http://plnkr.co/edit/ajLmjxnDJ1JXjkk86aRh?p=preview

edited Nov 1, 2016 at 18:56

answered Oct 30, 2016 at 13:36

Michelangelo

5,9785 gold badges36 silver badges51 bronze badges

1 Comment

charlietfl Over a year ago

"Element is an array" ... no , it is an array like object.

Collectives™ on Stack Overflow

Getting HTML markup in directive element parameter

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related