javascript - 访问指令内子 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 元素创建一个额外的指令会使模板变得如此薄并且读起来很奇怪？最后，使用 parent-directive 中的 element.children() 似乎真的很脆弱？

问题:

从指令模板中选择子元素的首选方法是什么？有没有办法保持它的 Angular 而不使每个部分都成为指令？

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

Main.htmlwa-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) {}
        })
     }

**在 Angular 中选择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]');