在指令模板中选择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>元素呈现在我的模板中。有没有更好的方法来做到这一点?
您可以为此编写一个伪指令,它使用属性给定的名称将(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>',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>不知道这是如何表现的性能方面