在指令元素参数中获取HTML标记

In this plunk我有一个用UL元素声明的指令。在指令元素参数中获取HTML标记

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

我试图通过分析向链路功能element参数检索这些，但我只让他们在innerHTML之中。我需要的是将li元素的ID和文本作为DOM获取。有任何想法吗？

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

来源

2016-10-30 ps0604

你想这样的结果： http://plnkr.co/edit/baeGA2wbMuZkQRW5vlY7?p=preview – Natiq

@Nati不，它仍然是这样的纯文本。 – Michelangelo

这看起来真的倒退了。什么生成的HTML首先？ – charlietfl

既然你在指令中有元素你不必使用querySelector，

你可以直接做，

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

DEMO

来源

2016-10-30 13:38:28 Sajeetharan

这个工作，但是如果指令有一个模板，任何想法如何解决这个问题呢？在控制台中查看错误http://plnkr.co/edit/Wy058Wqh2c7im0LhQQLC?p=preview – ps0604

是的，你可以。如果你记录元素，那么你会看到它是一个类似于对象的数组，你需要先选择数组的键来获取HTML元素。

.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

来源

2016-10-30 13:36:51 Michelangelo

*“元素是一个数组”* ...不，它是一个*数组像对象*。 – charlietfl

@charlietfl是的，真的......感谢您指出。 – Michelangelo

在指令元素参数中获取HTML标记

回答

相关问题