jQuery find() 方法在 AngularJS 指令中不起作用

Question

我在使用 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 demo is here.

为什么这么琐碎的事情不能正常工作？

Answer 1

来自docs on angular.element：

find() - 仅限于按标签名称查找

因此，如果您没有将 jQuery 与 Angular 一起使用，而是依赖其 jqlite 实现，则无法使用 elm.find('#someid')。

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

Answer 2

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

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

2- 通过执行以下操作再次将其转换为 angular.element 对象： var targetElement = angular.element(target)

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

Answer 3

在 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 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/