说我有以下代码：（Plunkr：https://plnkr.co/edit/lhSmKWq3dkDScLQlXMAX）
<directive-a id="1">
<a href="">1</a>
<a href="">1</a>
<directive-b>
<a href="">1</a>
</directive-b>
<directive-a id="2">
<a href="">2</a>
<directive-a id="3">
<a href="">3</a>
</directive-a>
</directive-a>
</directive-a>
directiveA和directiveB是2个不同的隐含指令。我们专注于directiveA，directiveB只是用来表示可以包含另一个指令而不是directiveA。每个
directiveA如何仅查找和修改其自己的tag元素？换句话说，在这种情况下，directiveA#1如何只能找到和修改3个a标签，而directiveA#2和directiveA#3各自只能找到和修改自己的1个a标签？见plunkr进行我的尝试，但到目前为止还没有运气。
最佳答案
请检查是否对您有帮助。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function() {
var vm = this;
});
app.directive('directiveA', function($timeout) {
return {
link: function(scope, element) {
// class name to be used as a filter
var className = 'aClass';
// array where suitable element ids will be collected into
var collectedIds = [];
// demarking boundaries - all directiveA's will have this class added to them
element.addClass(className);
// initiating the collection process
traverse(element);
// printing the result
console.log('scope a', scope.id, collectedIds);
/**
* responsible for traversing the DOM tree starting from the current
* element collecting IDs of elements of interest.
*
* elements of interest in this case are:
* "all descendants of the current node which do not have the class 'aClass'"
*/
function traverse(element) {
angular.forEach(element.children(), function(c) {
// wrapping dom element
var child = angular.element(c);
// is the current child of a desirable/valid type
if (isValidElement(child)) {
var childId = child.attr('id');
if (childId) {
// collecting the current element's id
collectedIds.push(childId);
}
// recurssing on the current element child elements
traverse(child);
}
});
}
/**
* responsible for deciding if the current element
* is of a desirable type to be traversed.
*/
function isValidElement(element) {
return !element.hasClass(className);
}
},
restrict: 'E',
scope: {
id: "="
},
transclude: true,
replace: true,
template: '<div ng-transclude></div>'
}
});
app.directive('directiveB', function() {
return {
restrict: 'E',
scope: {},
transclude: true,
replace: true,
template: '<div ng-transclude></div>'
}
});* {
list-style-type: none;
}<!DOCTYPE html>
<html ng-app="plunker">
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="app.js"></script>
<body ng-controller="MainCtrl as vm">
<directive-a id="1">
<a id="1" href="">1</a>
<a id="2" href="">1</a>
<directive-b>
<a id="3" href="">1</a>
<div>
<a id="6" href="">1</a>
</div>
</directive-b>
<directive-a id="2">
<a id="4" href="">2</a>
<directive-a id="3">
<a id="5" href="">3</a>
</directive-a>
</directive-a>
</directive-a>
<h3>Result example in console:</h3>
<ul>
<li>scope a 3: [5]</li>
<li>scope a 2: [4]</li>
<li>scope a 1: [1,2,3,6]</li>
</ul>
</body>
</html>