javascript - 分页器指令的动态项目模板

Question

我有一个分页器指令，它列出了一个数组中的项目:

    .directive('paginator', function() {
        restrict: 'A',
        template: 
           '<div ng-repeat="item in items">' +
               '<?>' + 
           '</div>' + 

            '<div>' + 
                '<button ng-click="goPrevious()">Previous</button>' +
                '<div>{{ currentPage }}/{{ numberOfPages() }}</div>' + 
                '<button ng-click="goNext()">Next</button>' +
            '</div>', 
        scope: {
          items: '=',
          itemsPerPage: '='
    },
        ...
    }

其中“<?>”应该是项目模板。我想要的是概括它并传递我需要的任何模板。有人知道我该怎么做吗？

Answer 1

这就是嵌入发挥作用的地方。

{
   restrict:'E'
   transclude:true,
   template: "<div id='outer'>" +
               "<h1>I'm a widget</h1>" +
               "<div ng-transclude>" +
               "<!-- template goes here -->" +
               "</div>" +
             "</div>"
}

然后您将在您的标记中像这样使用它:

<my-widget>
   <div>I'm just a plain old div</div>
   <span>and I'm just a span</span>
</my-widget>