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

Question

我在使用注入角元素查找子DOM元素的angularjs指令时遇到了问题。

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

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> 

我有权访问其通过将一类给它proffed的元素。 但是，尝试访问子元素会在var外观中产生一个空数组。

JSFiddle demo is here。

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

Answer 1

从docs on angular.element：

find() - 如果你不使用jQuery有棱有角，但依靠其jqlite实现由标签名

所以仅限于查询，你不能做elm.find('#someid')。

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

Answer 2

的jQuery的日子之前，你可以使用：

document.getElementById('findmebyid'); 

如果这一行会救你一整个jQuery库，它可能在使用它，而不是值得。

对于那些关心性能的人： 用ID开始选择器总是最好的，因为它使用本地函数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 3

find() - 通过标签名称 你可以看到更多信息 https://docs.angularjs.org/api/ng/function/angular.element

您也可以通过名称或ID，或致电访问仅限于查询请以下示例：

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

Answer 4

我用

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

来获得当前元素的子

Answer 5

可以轻松解决，在2个步骤：

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

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

然后，您将可以访问targetElement变量上的所有预期方法。

Answer 6

你可以这样说：

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/

Answer 7

如果有人正在抢关范围内一个“控制器”元素的..这样的事情：

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

使用以下内容：

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