jQuery find（）方法在AngularJS指令中不起作用

我有问题与angularjs指令寻找注入angular元素的子DOM元素。

例如，我有一个像这样的指令：

myApp.directive('test', function () { return { restrict: "A", link: function (scope, elm, attr) { var look = elm.find('#findme'); elm.addClass("addedClass"); console.log(look); } }; }); 

和HTML如：

 <div ng-app="myApp"> <div test>TEST Div <div id="findme"></div> </div> </div> 

我可以通过添加一个类来访问这个元素。 但是试图访问一个子元素在var外观中产生一个空数组。

JSFiddle演示在这里 。

为什么如此微不足道的东西不能正常工作？

Answer 1

从angular.element上的文档 ：

find() – 仅限于通过标签名称查找

所以，如果你不使用jQuery和Angular，而是依靠它的jqlite实现，你不能做elm.find('#someid') 。

您可以访问children() ， contents()和data()实现，所以通常可以find解决方法。

Answer 2

您可以轻松地通过2个步骤解决：

1-像这样使用querySelector达到子元素： var target = element[0].querySelector('tbody tr:first-child td')

2-再次将其转换为angular.element对象： var targetElement = angular.element(target)

然后，您将有权访问targetElementvariables上的所有预期方法。

Answer 3

在jQuery的日子之前，你会使用：

  document.getElementById('findmebyid'); 

如果这一行将为您节省一个完整的jQuery库，那么使用它可能是值得的。

对于那些关心性能的人来说：使用ID开始select器总是最好的，因为它使用本地函数document.getElementById。

 // Fast: $( "#container div.robotarm" ); // Super-fast: $( "#container" ).find( "div.robotarm" ); 

http://learn.jquery.com/performance/optimize-selectors/

jsPerf http://jsperf.com/jquery-selector-benchmark/32

Answer 4

find() – 通过标签名限制查找，可以看到更多信息https://docs.angularjs.org/api/ng/function/angular.element

您也可以通过名称或ID访问或请拨打以下例子：

 angular.element(document.querySelector('#txtName')).attr('class', 'error'); 

Answer 5

我用了

 elm.children('.class-name-or-whatever') 

让当前元素的孩子

Answer 6

如果有人正在寻找一个“控制器作为”元素的范围，..这样的事情：

 <div id="firstctrl" ng-controller="firstCtrl as vm"> 

使用以下内容：

 var vm = angular.element(document.querySelector('#firstctrl')).scope().vm; 

Answer 7

你可以这样做：

  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> 

http://jsfiddle.net/FZGKA/133/