javascript Angularjs：如何根据数据属性值查找元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25717535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs: how to find an element based on a data-attribute value?
提问by rnrneverdies
I've got the following directive:
我有以下指令：
template: '<div data-div="outer"><div data-div="inner"></div></div>',
link: function postLink(scope, elem, attrs) {
var outer = elem.find('[data-div="outer"]');
var inner = elem.find('[data-div="inner"]');
outer.css({
'background': 'red',
'width': "100%",
'height': "100%",
});
inner.css({
'background': 'blue',
'width': "50%",
'height': "100%",
});
}
Based on this post, i tried these selectors. but im using jQLite, not JQuery.
基于这篇文章，我尝试了这些选择器。但我使用的是 jQLite，而不是 JQuery。
so, how to find an element based on a data-attribute value?
那么，如何根据数据属性值查找元素？
回答by Anthony Chu
You can use querySelector()(or querySelectorAll()for multiples) to get a similar find()behavior when using jqLite...
使用 jqLite 时，您可以使用querySelector()（或querySelectorAll()用于倍数）来获得类似的find()行为...
function postLink(scope, elem, attrs) {
var outer = angular.element(elem[0].querySelector('[data-div="outer"]'));
var inner = angular.element(elem[0].querySelector('[data-div="inner"]'));
outer.css({
'background': 'red',
'width': "100%",
'height': "100%",
});
inner.css({
'background': 'blue',
'width': "50%",
'height': "100%",
});
}
回答by pixelbits
In angular, you rarely ever have to use jQuery selectors to find elements. Angular will walk the DOM tree and find the directives for you.
在 angular 中，您很少需要使用 jQuery 选择器来查找元素。Angular 将遍历 DOM 树并为您找到指令。
All you have to do is implement the directives:
您所要做的就是实现指令：
app.directive('div', function() {
return {
restrict: 'A',
link: function(scope, element, attr) {
if(attr.div == 'outer') {
element.css({
'background': 'red',
'width': "100%",
'height': "100%",
});
}
if(attr.div == 'inner') {
element.css({
'background': 'blue',
'width': "50%",
'height': "100%",
});
}
}
}
});
If you need further interactions with the parent directive, angular makes that easy to do too. You just have include a requireattribute to your directive definition, and the parent controller will be injected as the 4th parameter to your child directive's link function:
如果您需要与父指令进一步交互，angular 也可以轻松实现。您只需在指令定义中包含一个require属性，父控制器将作为第四个参数注入子指令的链接函数：
app.directive ('parent', function() {
return {
...
controller: function($scope, $element, $attrs) {
function doSomething() {
}
}
}
});
app.directive('child, function() {
return {
restrict: 'A',
require: '^parent', // child directive requires a parent directive
link: function(scope, element, attr, parentController) {
// access to the parent controller
parentController.doSomething();
}
}
});
