将 ngRepeat 包装在另一个指令中

Question

我正在尝试编写一个分页器作为我的应用程序的指令，但我似乎无法让它工作。我看过的每个地方都建议使用$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);
      }
    }
  };
});

您可能会说，我对 Angular 还是很陌生，任何帮助都将不胜感激。

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');