CODEWITHSUNDEEP
angularjs
mohi
mohi

Reputation: 1093

AngularJS: Pagination Directive does not work

I am trying to use this pagination in my app. For some reason, the partial view that I am going to use the pagination there, does not recognize the 

<li dir-paginate></li> and <dir-pagination-controls></dir-pagination-controls>

My guess is that the dependency injection in my angular app is wrong. This is my app module:(app.js)

var AngularSpringApp = angular.module('AngularSpringApp', ['angularUtils.directives.dirPagination']);

And here is my controller(KitController.js) which is associated with the view:

var KitController = function ($scope, $http) {

    $scope.kit = {};

    $scope.fetchKitList = function () {
        $http.get('kits/show').success(function (kitList) {
            $scope.kits = kitList;
        });
    };
    $scope.addKit = function (kit) {
        $http.post('kits/add', kit).success(function () {
            $scope.fetchKitList();
            $scope.kit.owner = '';
            $scope.kit.category = '';
        });
    };

    $scope.resetKitForm = function () {
        $scope.kit = {};
    };

  $scope.currentPage = 1;
  $scope.pageSize = 10;

};
KitController.$inject = ['$scope', '$http'];
AngularSpringApp.controller('KitController', KitController);

The app is working without the last 2 lines as well. The controller is fine as it is working for other feature.

Here are the errors from console:

Attr.specified is deprecated. Its value is always true. angular.js:3887
TypeError: undefined is not a function
    at dirPaginationLinkFn (http://localhost:8084/app/resources/js/dirPagination.js:107:31)
    at nodeLinkFn (http://localhost:8084/app/resources/js/lib/angular/angular.js:4240:13)
    at compositeLinkFn (http://localhost:8084/app/resources/js/lib/angular/angular.js:3851:14)
    at compositeLinkFn (http://localhost:8084/app/resources/js/lib/angular/angular.js:3854:12)
    at compositeLinkFn (http://localhost:8084/app/resources/js/lib/angular/angular.js:3854:12)
    at publicLinkFn (http://localhost:8084/app/resources/js/lib/angular/angular.js:3763:30)
    at update (http://localhost:8084/app/resources/js/lib/angular/angular.js:13890:11)
    at Object.Scope.$broadcast (http://localhost:8084/app/resources/js/lib/angular/angular.js:8090:28)
    at http://localhost:8084/app/resources/js/lib/angular/angular.js:7250:26
    at wrappedCallback (http://localhost:8084/app/resources/js/lib/angular/angular.js:6650:59) <!-- ngRepeat: item in data | itemsPerPage: 2 --> angular.js:5582
GET http://localhost:8084/app/function%20(elem,%20attrs)%20%7B%20%20%20%20%20%2…%7C%20paginationTemplate.getPath();%20%20%20%20%20%20%20%20%20%20%20%20%7D 404 (Not Found) angular.js:9052
Uncaught TypeError: undefined is not a function

Any idea what is the problem?

Upvotes: 0

Views: 745

Answers (1)

mohi
mohi

Reputation: 1093

OK, it seems the problem was that the angular.js file that I had in my project was very old (v1.0.3). I was trying to replace it with the latest version of the angular, but I was receiving errors about ngRoute. It seems the old version of the angular included ngRoute, but now it is a separate module which has to be added. Updating the angular.js solved the problem!

Upvotes: 1

Related Questions