在指令中访问子div的最佳方法是什么？

Question

好吧，我经常遇到这个问题，我需要选择/访问父指令和子指令之间的包装容器。

伪代码：

<div parent-directive>
   <!-- selecting the viewport becomes hard.  making an extra directive seems weird -->
   <div class="wrapping-div">
      <div child-directive ng-repeat="page in pages" ></div>
   </div>
</div>

我不想使用jQuery按类选择wrapping-div。为wrapping-div元素创建一个额外的指令会使模板变得如此之薄并且看起来很奇怪？最后，使用element.children()中的parent-directive似乎非常脆弱？

的问题：

从指令模板中选择子元素的首选方法是什么？是否有任何方法可以保持角度不会使每个部分成为指令？

为了更好的上下文，我正在制作一个名为wa-carousel的基本轮播指令。

main.html中 wa-carousel是一种API：

<div wa-carousel class="wa-carousel"></div>

wa.carousel.html 此模板有一个指令：wa-pages。

<div class="wa-carousel-viewport">

    <ul class="transition-fast wa-page-collection" ng-style="carousel.pagedOffseter">
      <li wa-pages page="page" class="wa-pages" ng-repeat="page in carousel.pages"></li>
    </ul>

</div>

正如您所看到的，有2个包装器只是非指令wa-carousel-viewport和wa-page-collection的类。

wa-page-collection将使用ng-touch，但我想从wa-carousel链接功能控制它，但我不得不使用我不喜欢的el.children().children()。< /强>

wa.carousel.js

   link: function(scope, el, attrs){

        var viewport = el.children().children();

        $swipe.bind(viewport, {
              'start': function(coords) {}
        })
     }

**在角度中选择wa-page-collection的首选方法是什么？在wa-carousel的链接函数中进行操作被认为是不好的做法吗？ **

Answer 1

在要专门定位的元素上使用data-属性或类似属性。然后：

link: function (scope, el, attrs) {
    var viewport = angular.element(el[0].querySelector('[data-my-attr]'));

    $swipe.bind(viewport, {
        'start': function(coords) {}
    })
}

如果使用jQuery，您可以将选择器缩短为var viewport = el.find('[data-my-attr]');