Javascript jQuery find() 方法在 AngularJS 指令中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14865965/
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
jQuery find() method not working in AngularJS directive
提问by Ray Garner
I am having trouble with angularjs directives finding child DOM elements with the injected angular element.
我在使用 angularjs 指令查找带有注入的 angular 元素的子 DOM 元素时遇到问题。
For example I have a directive like so:
例如，我有一个这样的指令：
myApp.directive('test', function () {
return {
restrict: "A",
link: function (scope, elm, attr) {
var look = elm.find('#findme');
elm.addClass("addedClass");
console.log(look);
}
};
});
and HTML such as :
和 HTML，例如：
<div ng-app="myApp">
<div test>TEST Div
<div id="findme"></div>
</div>
</div>
I have access to the element which is proffed by adding a class to it. However attempting to access a child element produces an empty array in the var look.
我可以访问通过向其添加类来提供的元素。但是，尝试访问子元素会在 var 外观中产生一个空数组。
Why is something so trivial not working properly?
为什么这么琐碎的事情不能正常工作？
回答by satchmorun
From the docs on angular.element:
find()- Limited to lookups by tag name
find()- 仅限于按标签名称查找
So if you're not using jQuery with Angular, but relying upon its jqlite implementation, you can't do elm.find('#someid').
因此，如果您不将 jQuery 与 Angular 一起使用，而是依赖其 jqlite 实现，则无法执行elm.find('#someid').
You do have access to children(), contents(), and data()implementations, so you can usually find a way around it.
您有机会获得children()，contents()和data()实现，所以通常可以找到办法解决它。
回答by Felippe Nardi
You can easily solve that in 2 steps:
您可以通过 2 个步骤轻松解决该问题：
1- Reach the child element using querySelector like that:
var target = element[0].querySelector('tbody tr:first-child td')
1- 使用 querySelector 像这样到达子元素：
var target = element[0].querySelector('tbody tr:first-child td')
2- Transform it to an angular.elementobject again by doing:
var targetElement = angular.element(target)
2-angular.element通过执行以下操作将其再次转换为对象：
var targetElement = angular.element(target)
You will then have access to all expected methods on the targetElementvariable.
然后，您将可以访问该targetElement变量的所有预期方法。
回答by Zymotik
Before the days of jQuery you would use:
在 jQuery 出现之前，你会使用：
document.getElementById('findmebyid');
If this one line will save you an entire jQuery library, it might be worth while using it instead.
如果这一行将为您节省整个 jQuery 库，那么使用它可能是值得的。
For those concerned about performance: Beginning your selector with an ID is always best as it uses native function document.getElementById.
对于那些关心性能的人：以 ID 开头的选择器总是最好的，因为它使用本机函数 document.getElementById。
// Fast:
$( "#container div.robotarm" );
// Super-fast:
$( "#container" ).find( "div.robotarm" );
http://learn.jquery.com/performance/optimize-selectors/
http://learn.jquery.com/performance/optimize-selectors/
回答by user3454062
find()- Limited to lookups by tag name
you can see more information
https://docs.angularjs.org/api/ng/function/angular.element
find()- 仅限于按标签名称查找，您可以查看更多信息
https://docs.angularjs.org/api/ng/function/angular.element
Also you can access by name or id or call please following example:
您也可以按名称或 ID 访问或致电，请参考以下示例：
angular.element(document.querySelector('#txtName')).attr('class', 'error');
回答by simonpkerr
I used
我用了
elm.children('.class-name-or-whatever')
to get children of the current element
获取当前元素的子元素
回答by Helzgate
If anyone is looking to grab the scope off of a 'controller as' element,.. something like this:
如果有人想从“控制器为”元素中获取范围，.. 像这样：
<div id="firstctrl" ng-controller="firstCtrl as vm">
use the following:
使用以下内容：
var vm = angular.element(document.querySelector('#firstctrl')).scope().vm;
回答by ST80
You can do it like this:
你可以这样做：
var myApp = angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.aaa = 3432
}])
.directive('test', function () {
return {
link: function (scope, elm, attr) {
var look = elm.children('#findme').addClass("addedclass");
console.log(look);
}
};
});
<div ng-app="myApp" ng-controller="Ctrl">
<div test>TEST Div
<div id="findme">{{aaa}}</div>
</div>
</div>
