Javascript 编写指令以封装多个指令

我用的是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>

但我不确定这是否可行。谢谢

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