在指令模板内访问DOM元素的AngularJS
在指令模板内访问DOM元素的AngularJS
提问于 2013-04-08 22:14:53
有没有更“角度”的方式来选择指令模板中的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>元素。有没有更好的方法来做这件事？
Stack Overflow用户
回答已采纳
发布于 2013-08-07 04:43:29
您可以为此编写一个指令，它简单地使用给定属性的名称将(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
}
}
});以下是一些备注：
由于前置函数，您只能从anyway
ngScopeElement的
- - compile and link order for nested directives访问
scope.list，您很可能使用myDirective使用了ng-scope-element-compile and link order for nested directives，因此嵌套在具有scope.list的元素中的指令已经可以访问myDirective确定这是如何行为的scope.list
- not
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15881453
复制相关文章
相似问题
腾讯云开发者
