AngularJS – 用属性查找元素
我是AngularJS的新手。 我已经了解到，我可以使用如下查询在DOM中查找元素：
var e = angular.element(document.querySelector('#id')); var e = angular.element(elem.querySelector('.classname')); 这对于通过ID或CSS类名查找元素非常有用。 但是，我需要能够find一个元素使用不同的方法。 我有一个如下所示的元素：
<div my-directive class='myContainer'>...</div>
我无法在“myContainer”上查询，因为它的重用程度如何。 出于这个原因，我想find任何具有“my-directive”属性的元素。 如何searchDOM并find任何使用“my-directive”的元素？
而不是查询元素的DOM（这不是非常angular度，如果我有一个jQuery背景，请参阅“在AngularJS中思考” ），您应该在您的指令中执行DOM操作。 该元素在您的链接function中可用。
所以在你的myDirective
return { link: function (scope, element, attr) { element.html('Hello world'); } }
如果您必须在指令之外执行查询，那么在现代浏览器中可以使用querySelectorAll
angular.element(document.querySelectorAll("[my-directive]"));
但是，你需要使用jQuery来支持IE8和向后
angular.element($("[my-directive]"));
或者像这里演示的那样编写你自己的方法在没有使用库的情况下querySelectorAll不可用时，通过属性获取元素？
你的用例还不清楚。 但是，如果您确定需要基于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看到这一点;
你没有说明你在找什么元素。 如果它在控制器的范围之内，尽pipe合唱你会听到它不是'angular度的方式'，也是可能的。 合唱是对的，但有时候，在现实世界中，这是不可避免的。 （如果您不同意，请联系我 – 我对您有挑战。）
如果将$element传递给控制器，就像$scope ，可以使用它的find()函数。 请注意，在Angular中包含的jQueryLite中， find()只能按名称定位标签，而不能定位标签。 但是，如果在项目中包含完整的jQuery，则可以使用find()所有function，包括按属性查找。
所以，对于这个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" } } ]);
