トランスクルードディレクティブの子要素を探すが、

は、私は次のコードがあるとし、独自のネストされたディレクティブの子要素を除外：（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はどのようにして独自のタグ要素を見つけて修正できますか？言い換えれば、この場合、directiveA#1はどのようにしてタグを見つけて変更することができますか？directiveA#2とdirectiveA#3それぞれは独自のタグを見つけて修正することができますか？

これまでのところ私の試みではplunkrを参照してください。

出典

2016-11-29 Great Question

これが役立つかどうかを確認してください。

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>

出典

2016-11-30 12:39:07 user3714224

トランスクルードディレクティブの子要素を探すが、

答えて

関連する問題