Question

我正在使用Angular 1.x，我有一段代码，我想重复一遍，所以我想把它扔进一个指令。麻烦的是，它有点复杂，我不知道如何开始写它。

基本上，它是页面的一部分，显示各种卡片指令，并具有无限滚动和完美滚动条。

<perfect-scrollbar refresh-on-change="myScope.data">
   <div class="limit-columns">
      <masonry masonry-options="{gutter: 30, isFitWidth: true}">
           <user-card class="masonry-brick" ng-repeat="item in myScope.data"></user-card>
      </masonry>
      <div class="infinite-scroller" infinite-scroll="myScope.showMore()" infinite-scroll-tolerance="5"></div>
   </div>
</perfect-scrollbar>

Perfect-scrollbar和masonry都是GitHub上的角度库。无限卷轴是我自己写的，但可以按照你的期望工作。

myScope包含data属性，该属性是包含卡片数据的对象列表。 myScope.showMore是一个将项添加到myScope.data列表的函数。完美滚动条还采用refresh-on-change属性，该属性监视特定对象的更改，在本例中为列表。

理想情况下，我的指令看起来像这样：

<card-scroller gutter="30" tolerance="5">
   <some-card ng-repeat="achievements.data"></some-card>
</card-scroller>

但我不确定这是多么可行。谢谢！

编写一个指令来封装多个指令Angular

0 个答案: