角度分页不起作用

时间:2015-03-29 10:04:37

标签: angularjs pagination

在我的pagination.html中,我有:

<div ng-init="currentPage=3; numPages=5; selectCount=0">
  <pagination num-pages="numPages" current-page="currentPage" on-select-page="selectCount=selectCount+1"></pagination>
  <div>Number of Pages: <input ng-model="numPages" type="number"></div>
  <div>Current Page: <input ng-model="currentPage"  type="number"></div>
  <div>Count of Page Selections: {{selectCount}}</div>
</div>

在我的pagination.directive.js中我有:

'use strict';

angular.module('bemsApp')
  .directive('pagination', function () {
    return {
      templateUrl: 'app/directives/pagination/pagination.html',
      restrict: 'EA',
      scope: {
        numPages: '=',
        currentPage: '=',
        onSelectPage: '&'
        },
    template:
      '<div class="pagination"><ul>' +
        '<li ng-class="{disabled: noPrevious()}"><a ng-click="selectPrevious()">Previous</a></li>' +
        '<li ng-repeat="page in pages" ng-class="{active: isActive(page)}"><a ng-click="selectPage(page)">{{page}}</a></li>' +
        '<li ng-class="{disabled: noNext()}"><a ng-click="selectNext()">Next</a></li>' +
        '</ul>' +
      '</div>',
    replace: true,
      link: function (scope, element, attrs) {
        scope.$watch('numPages', function(value) {
            scope.pages = [];
            for(var i=1;i<=value;i++) {
              scope.pages.push(i);
            }
            if ( scope.currentPage > value ) {
              scope.selectPage(value);
            }
          });
          scope.noPrevious = function() {
            return scope.currentPage === 1;
          };
          scope.noNext = function() {
            return scope.currentPage === scope.numPages;
          };
          scope.isActive = function(page) {
            return scope.currentPage === page;
          };

          scope.selectPage = function(page) {
            if ( ! scope.isActive(page) ) {
              scope.currentPage = page;
              scope.onSelectPage({ page: page });
            }
          };

          scope.selectPrevious = function() {
            if ( !scope.noPrevious() ) {
              scope.selectPage(scope.currentPage-1);
            }
          };
          scope.selectNext = function() {
            if ( !scope.noNext() ) {
              scope.selectPage(scope.currentPage+1);
            }
          };
        }
    };
  });

创建如下代码:如果执行导致以下错误。

错误:[$ compile:multidir]多个指令[pagination,pagination]要求提供模板:

我真的很想知道问题是什么。

要修复此错误,您如何修复pagination.directive.js?

0 个答案:

没有答案