Question

说我有以下代码:( 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是两种不同的转换指令。我们专注于directiveA，directiveB只是表示可以有另一个指令，而不是directiveA。

每个directiveA如何仅查找和修改自己的标记元素？换句话说，在这种情况下，directiveA#1如何仅查找和修改3个标记directiveA#2和directiveA#3，每个标记只能找到并修改1个自己的标记？

到目前为止，请参阅plunkr我的尝试但没有运气。

Answer 1

请检查这是否对您有帮助。

＆＃13;

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>'
  }
});

＆＃13;

* {
  list-style-type: none;
}

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" 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>

＆＃13;

查找transcluded指令的子元素，但不包括其自己的嵌套指令子元素

1 个答案: