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

Answer 1

我不认为选择一个元素有更多的“角度方式”。例如，请参阅this old documentation page的最后一个示例中他们实现此目标的方式：

{
     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

你可以为此编写一个指令，它只是使用属性给定的名称将（jqLite）元素赋给作用域。

这是指令：

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

一些评论：

由于compile and link order for nested directives，您只能从scope.list的postLink-Function访问myDirective，无论如何你很可能会使用
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应用的解决方案here将是：

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成功试用。

希望它有所帮助。

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

3 个答案: