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

<ul>我使用 jQuery 样式选择器来获取在我的模板中呈现的 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 成功尝试过。

希望能帮助到你。