Pass more than one arguments to controller function from angular directive

Question

I need to pass two arguments from directive to a function which is defined in controller.

HTML

<div paginate="allResults" change-page="changePage()"></div>

Directive

app.directive('paginate', function () {
    return {
        scope: {
            allResults: '=paginate',
            changePage:'&'
        },
        template: '<ul class="pagination" ng-show="totalPages > 1">' +
            '  <li><a ng-click="firstPage()">&laquo;</a></li>' +
            '  <li><a ng-click="prevPage()">&lsaquo;</a></li>' +
            '  <li ng-repeat="n in pages">' +
            '    <a class="current-{{n==current_page}}" ng-bind="n" ng-click="setPage(n)">1</a>' +
            '  </li>' +
            '  <li><a ng-click="nextPage()">&rsaquo;</a></li>' +
            '  <li><a ng-click="last_page()">&raquo;</a></li>' +
            '</ul>',
        link: function (scope) {
            scope.nextPage = function () {
                if (scope.current_page < scope.totalPages) {
                    scope.current_page++;
                }
            };

            scope.prevPage = function () {
                if (scope.current_page > 1) {
                    scope.current_page--;
                }
            };

            scope.firstPage = function () {
                scope.current_page = 1;
            };

            scope.last_page = function () {
                scope.current_page = scope.totalPages;
            };

            scope.setPage = function (page) {
                scope.current_page = page;
            };
            var paginate = function (results, oldResults) {
                if (oldResults === results) return;
                scope.current_page = results.current_page;
                scope.total = results.total;
                scope.totalPages = results.last_page;
                scope.pages = [];

                for (var i = 1; i <= scope.totalPages; i++) {
                    scope.pages.push(i);
                }
            };

            var pageChange = function (newPage, last_page) {
                scope.changePage(newPage, last_page);
            };

            scope.$watch('allResults', paginate);
            scope.$watch('current_page', pageChange);
        }
    }
});

Controller

function CareerCtrl($scope, $http, Career) {

    $scope.init = function () {
        Career.get({}, function (response) {

            $scope.careers = response.careers.data;
            $scope.allResults = response.careers;
        }, function (error) {
            console.log(error);
            $scope.careers = [];
        });

    }; // init

    $scope.changePage = function(newPage, last_page) {
        console.log(newPage);
        console.log(last_page);
        if (newPage == last_page) return;
        Career.get({
             page: newPage
        }, function (response) {
         angular.copy(response.careers.data,scope.allResults.data);
         scope.allResults.current_page = response.careers.current_page;
        }, function (error) {
             console.log(error);
             $scope.allResults.data = [];
       });

    }
} // Ctrl

Now I am getting undefined for newPage and last_page in controller.

See my fiddle here

tasseKATT · Accepted Answer · 2013-11-23 07:25:48Z

3

Solution one (fiddle):

Html:

<div paginate="allResults" change-page="changePage(newPage, last_page)"></div>

Directive:

var pageChange = function (newPage, last_page) {
    scope.changePage({
        newPage: newPage,
        last_page: last_page
    });
};

Solution two (fiddle):

Html:

<div paginate="allResults" change-page="changePage"></div>

Directive:

var pageChange = function (newPage, last_page) {
    var expressionHandler = scope.changePage();
    expressionHandler(newPage, last_page);
};

Note that you need to change scope to $scope in two places in your controller function $scope.changePage in your original fiddle.

answered Nov 23, 2013 at 7:25

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anshad Vattapoyil Over a year ago

Thanks..I like detailed explanation like this.

Collectives™ on Stack Overflow

Pass more than one arguments to controller function from angular directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related