AngularJS访问指令模板中的DOM元素

在指令模板中selectDOM元素有更多的“angular度”方法吗？ 例如，假设你有这个指令：

app.directive("myDirective", function() { return { template: '<div><ul><li ng-repeat="item in items"></ul></div>', link: function(scope, element, attrs) { var list = element.find("ul"); } } }); 

我使用jQuery样式select器来获取在我的模板中呈现的DOM <ul>元素。 有一个更好的方法吗？

Answer 1

你可以为此写一个指令，它使用给定的属性名简单地将（jqLit​​e）元素分配给作用域。

这是指令：

 app.directive("ngScopeElement", function () { var directiveDefinitionObject = { restrict: "A", compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { scope[iAttrs.ngScopeElement] = iElement; } }; } }; return directiveDefinitionObject; }); 

用法：

 app.directive("myDirective", function() { return { template: '<div><ul ng-scope-element="list"><li ng-repeat="item in items"></ul></div>', link: function(scope, element, attrs) { scope.list[0] // scope.list is the jqlite element, // scope.list[0] is the native dom element } } }); 

一些评论：

• 由于嵌套指令的编译和链接顺序，你只能从myDirective的postLink-Function访问scope.list ，
• ngScopeElement使用preLink函数，因此嵌套在具有ng-scope-element的元素中的指令可以访问scope.list
• 不知道这是如何performance明智的

Answer 2

我不认为有一个更“angular度的方式”select一个元素。 例如，请参阅此旧文档页面的最后一个示例中他们实现此目标的方式：

 { template: '<div>' + '<div class="title">{{title}}</div>' + '<div class="body" ng-transclude></div>' + '</div>', link: function(scope, element, attrs) { // Title element var title = angular.element(element.children()[0]), // ... } } 

Answer 3

这个答案有点晚，但我只是在类似的需求。

观察@ganaraj在这个问题中所写的注释，我需要的一个用例是通过一个指令属性传递一个类名来添加到模板中的ng-repeat li标签中。

例如，使用这样的指令：

 <my-directive class2add="special-class" /> 

并获得以下的HTML：

 <div> <ul> <li class="special-class">Item 1</li> <li class="special-class">Item 2</li> </ul> </div> 

这里应用templateUrl的解决scheme是：

 app.directive("myDirective", function() { return { template: function(element, attrs){ return '<div><ul><li ng-repeat="item in items" class="'+attrs.class2add+'"></ul></div>'; }, link: function(scope, element, attrs) { var list = element.find("ul"); } } }); 

刚刚用AngularJS 1.4.9试了一下。

希望能帮助到你。