javascript - 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 演示在这里。

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

Answer 1

从上的文档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/