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

发布时间：2020-12-17 09:01:11 所属栏目：安全来源：网络整理

导读：在指令模板中选择DOM元素有更多的“有角度”的方式吗？例如，假设您有这个指令： app.directive("myDirective",function() { return { template: 'divulli ng-repeat="item in items"/ul/div',link: function(scope,element,attrs) { var list = element.fin

在指令模板中选择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>元素呈现在我的模板中。有没有更好的方法来做到这一点？

您可以为此编写一个伪指令，它使用属性给定的名称将(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>',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从myDirectives postLink-Function，你很可能使用反正> ngScopeElement使用preLink函数，因此嵌套在具有ng-scope-element的元素中的指令已经可以访问scope.list>不知道这是如何表现的性能方面

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!