45

我在使用 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 演示在这里。

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

4

7 回答 7

76

从上的文档angular.element：

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

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

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

于 2013-02-14T00:52:28.010 回答
27

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

1-使用 querySelector 到达子元素，如下所示： var target = element[0].querySelector('tbody tr:first-child td')

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

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

于 2015-06-23T17:08:59.470 回答
13

在 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

于 2014-03-04T22:45:51.007 回答
9

find()- 仅限于按标签名称查找，您可以查看更多信息 https://docs.angularjs.org/api/ng/function/angular.element

您也可以通过姓名或 ID 访问或致电以下示例：

angular.element(document.querySelector('#txtName')).attr('class', 'error');
于 2014-09-12T07:26:21.820 回答
1

我用了

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

获取当前元素的子元素

于 2015-01-23T13:36:05.557 回答
-2

如果有人想从“控制器作为”元素中获取范围，那么......就像这样：

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

使用以下内容：

var vm = angular.element(document.querySelector('#firstctrl')).scope().vm;
于 2016-01-21T18:44:24.303 回答
-3

你可以这样做：

 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/

于 2015-06-24T13:28:46.880 回答