javascript - 如何在不请求外部页面的情况下重用 Angular-JS 常见标记(例如小部件)？

Question

我有一个共同的逻辑来渲染复杂项目的集合:

<div class="left-sidebar"
    <div ng-repeat="item in items1">
      //Complex rendering mark up here
    </div>
</div>
<div class="right-sidebar"
    <div ng-repeat="item in items2">
      //Complex rendering mark up here
    </div>
</div>

常见的复杂渲染标记仅在该特定页面中使用，但在页面的几个不同部分(例如左侧边栏、右侧边栏)中使用，并具有不同的数据来渲染。当然，我可以简单地复制标记，但我想干燥(不要重复)它。

ng-include 似乎可以解决这个问题，但我不想将逻辑放在另一个页面中以最小化服务器 HTTP GET 请求。有没有办法在没有额外服务器请求的情况下做到这一点？

Answer 1

您可以定义如下指令:

  angular.module('myApp').directive('commonMarkup', function() {
  return {
    restrict: 'EAC',
    scope:{ item: '@' },
    link: function($scope, $element, $attrs) {

    },
    template:'<span>{{item.text}}</span>',
    replace: true
   };
 });

只需用您的渲染标记替换模板即可。 然后你可以像这样使用它:

 <div class="left-sidebar"
   <div ng-repeat="item in items1">
     <common-markup item="item"/>
   </div>
 </div>
 <div class="right-sidebar"
   <div ng-repeat="item in items2">
     <common-markup item="item"/>
   </div>
 </div>