Question

我是AngularJS的新手。我已经了解到我可以使用以下查询在DOM中找到元素：

var e = angular.element(document.querySelector('#id'));
var e = angular.element(elem.querySelector('.classname'));

这对于按ID或CSS类名查找元素非常有用。但是，我需要能够使用不同的方法找到元素。我有一个如下所示的元素：

<div my-directive class='myContainer'>...</div>

我无法查询'myContainer'，因为它重用了多少。出于这个原因，我想找到任何具有属性'my-directive'的元素。如何搜索DOM并找到使用'my-directive'的任何元素？

Answer 1

您应该在指令中执行DOM操作，而不是查询DOM中的元素（角度不是很"Thinking in AngularJS" if I have a jQuery background?）。您可以在链接功能中使用该元素。

所以在你的myDirective中

return {
    link: function (scope, element, attr) {
        element.html('Hello world');
    }
}

如果你必须在指令之外执行查询，那么就可以在现代浏览器中使用querySelectorAll

angular.element(document.querySelectorAll("[my-directive]"));

但是你需要使用jquery来支持IE8和后退

angular.element($("[my-directive]"));

或编写您自己的方法，如Get elements by attribute when querySelectorAll is not available without using libraries?

所示

Answer 2

您的用例不明确。但是，如果您确定需要基于DOM而不是模型数据，那么这是一种指令可以引用所有具有指定的指令的元素。

方式是子指令可以require父指令。父指令可以公开一个方法，该方法允许直接指令使用父指令注册其元素。通过这个，父指令可以访问子元素。所以如果你有一个像这样的模板：

<div parent-directive>
  <div child-directive></div>
  <div child-directive></div>
</div>

然后指令可以编码如下：

app.directive('parentDirective', function($window) {
  return {
    controller: function($scope) {
      var registeredElements = [];
      this.registerElement = function(childElement) {
        registeredElements.push(childElement);
      }
    }
  };
});

app.directive('childDirective', function() {
  return {
    require: '^parentDirective',
    template: '<span>Child directive</span>',
    link: function link(scope, iElement, iAttrs, parentController) {
      parentController.registerElement(iElement);
    }
   };
});

您可以在http://plnkr.co/edit/7zUgNp2MV3wMyAUYxlkz?p=preview

看到这一点

Answer 3

您尚未说明您在寻找元素的位置。如果它在控制器的范围内，有可能，尽管合唱你会听到它不是'Angular Way'。合唱是正确的，但有时候，在现实世界中，它是不可避免的。（如果你不同意，请联系我 - 我有一个挑战。）

如果您将$element传递给控制器，就像$scope一样，您可以使用其find()功能。请注意，在Angular中包含的jQueryLite中，find()只会按名称而不是属性来定位标记。但是，如果在项目中包含完整的jQuery，则可以使用find()的所有功能，包括按属性查找。

所以，对于这个HTML：

<div ng-controller='MyCtrl'>
    <div>
        <div name='foo' class='myElementClass'>this one</div>
    </div>
</div>

这个AngularJS代码应该可以工作：

angular.module('MyClient').controller('MyCtrl', [
    '$scope',
    '$element',
    '$log',
    function ($scope, $element, $log) {

        // Find the element by its class attribute, within your controller's scope
        var myElements = $element.find('.myElementClass');

        // myElements is now an array of jQuery DOM elements

        if (myElements.length == 0) {
            // Not found. Are you sure you've included the full jQuery?
        } else {
            // There should only be one, and it will be element 0
            $log.debug(myElements[0].name); // "foo"
        }

    }
]);

AngularJS - 使用属性查找元素

3 个答案: