Question

我有一个paginator指令，列出了数组中的项目：

    .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: '='
    },
        ...
    }

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

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>

Answer 2

我认为您正在寻找ngTransclude（http://docs.angularjs.org/api/ng/directive/ngTransclude）

检查这个例子：

<script>
  function Ctrl($scope) {
    $scope.title = 'Lorem Ipsum';
    $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
  }

  angular.module('transclude', [])
   .directive('pane', function(){
      return {
        restrict: 'E',
        transclude: true,
        scope: { title:'@' },
        template: '<div style="border: 1px solid black;">' +
                    '<div style="background-color: gray">{{title}}</div>' +
                    '<div ng-transclude></div>' +
                  '</div>'
      };
  });
</script>
<div ng-controller="Ctrl">
  <input ng-model="title"><br>
  <textarea ng-model="text"></textarea> <br/>
  <pane title="{{title}}">{{text}}</pane>
</div>

paginator指令的动态项模板

2 个答案: