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

Question

是否有更"有棱角"的方式在指令模板中选择DOM元素？例如,假设你有这个指令:

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样式选择器来获取<ul>我的模板中呈现的DOM 元素.有一个更好的方法吗？

Answer 1

我不认为选择一个元素有更多的"角度方式".例如,请参阅此旧文档页面的最后一个示例中它们实现此目标的方式:

{
     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 2

您可以为此编写一个指令,它只是使用属性给定的名称将(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
        }
    }
});

一些评论:

• 由于嵌套指令的编译和链接顺序,您只能scope.list从myDirectives postLink-Function 访问,无论如何您很可能使用它
• ngScopeElement使用preLink函数,以便嵌套在ng-scope-element已经可以访问的元素中的指令scope.list
• 不确定这在性能方面表现如何

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 的解决方案是：

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中成功尝试过。

希望能帮助到你。