将ngRepeat包装在另一个指令中

Question

我正在尝试编写一个paginator作为我的应用程序的指令，但我似乎无法让它工作。我看过的每个地方都建议使用$compile，但我根本无法使用它。

这就是我所拥有的，您可以观看现场演示here

var app = angular.module('myApp', []);

app.controller('MyController', function($scope) {
  $scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
});

app.directive('myPaginator', function() {
  return {
    restrict : 'A',
    priority : 1000,

    scope : {
      items : '=myPaginator'
    },

    controller : function($scope) {
      $scope.amount = 5;
    }
  };
});

app.directive('myPaginatorItem', function($compile) {
  return {
    restrict : 'A',
    require  : '^myPaginator',
    priority : 999,

    compile : function(element) {
      element
        .removeAttr('my-paginator-item')
        .attr('ng-repeat', 'item in items | limitTo:amount');

      return function($scope, element) {
        $compile(element)($scope);
      }
    }
  };
});

你可能会说，我对角度很新，任何帮助都会非常感激。

Answer 1

我设法通过将数据存储在主指令的控制器而不是范围上来使其工作，您可以看到here。

var app = angular.module('myApp', []);

app.controller('MyController', function($scope) {
  $scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
});

app.directive('myPaginator', function() {
  return {
    restrict : 'A',
    priority : 1000,
    replace  : true,

    scope : {
      items : '=myPaginator'
    },

    controller : function($scope) {
      this.items = $scope.items;
      this.amount = 5;
    }
  };
});

app.directive('myPaginatorItem', function($compile) {
  return {
    restrict : 'A',
    require  : '^myPaginator',
    priority : 999,
    scope    : {},

    compile : function(element) {


      element
        .removeAttr('my-paginator-item')
        .attr('ng-repeat', 'item in paginator.items | limitTo:paginator.amount');

      return function($scope, element, $attrs, paginator) {
        $scope.paginator = paginator;
        $compile(element)($scope);
      }
    }
  };
});

Answer 2

这里有两个主要问题：

首先，您的指令不共享相同的范围：

其次，在您指示内部，您引用外部范围变量items：

.attr('ng-repeat', 'item in items | limitTo:amount');