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 look中生成一个空数组.

JSFiddle演示就在这里.

为什么这么简单的事情不能正常工作？

Answer 1

来自以下文档angular.element:

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

所以,如果你没有在Angular中使用jQuery,而是依赖于它的jqlite实现,你就做不到elm.find('#someid').

您也可以访问children(),contents()以及data()实现的,所以通常可以找到办法解决它.

Answer 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

您也可以通过姓名或身份证或访问来访问以下示例:

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