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

前端之家收集整理的这篇文章主要介绍了AngularJS访问指令模板中的DOM元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在指令模板中选择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>不知道这是如何表现的性能方面

猜你在找的Angularjs相关文章