AngularJS directive scope binding not populated immediately in link function

Question

I'm writing the following directive:

.directive('mypagination', function () {
    return {
        restrict: 'E',
        scope: {
            pageCount: "=",
        },
        template: "{{pageCount}}",
        link: function ($scope, $element, $attrs) {
            $scope.pages = [];
            for (var i = 1; i <= $scope.pageCount; i++) {
                $scope.pages.push(i);
            }
        }
    }
})

My issue is that $scope.pageCount inside the for loop is set to 0, but {{pageCount}} in the template is rendering the correct value.

In HTML the directive is being called like this:

<mypagination page-count="mjaController.pages.length" 
              on-page-change="mjaController.fetchStuff(page)">
</mypagination>

Why would the value of pageCount be 0 inside the link function, but render correctly on the page?

I tried with your code but seems coming correct value. can you check and console and see. — Avnesh Shakya
– Avnesh Shakya, Commented Dec 18, 2017 at 17:43

Vipin Kumar · Accepted Answer · 2017-12-18 17:44:58Z

When your link function is executed at that time pageCount can be 0 because it is bound to mjaController.pages.length property which I guess is retrieved from an API and is async call. Once the mjaController.pages is filled with some data, then pageCount is set to its length and is displayed on template via $digest cycle but link function will not execute again. To make it work as expected do following

.directive('mypagination', function () {
    return {
        restrict: 'E',
        scope: {
            pageCount: "=",
        },
        template: "{{ pages()|json }}",
        link: function ($scope, $element, $attrs) {
            $scope.pages = function () {
              var pages = [];
              for (var i = 1; i <= $scope.pageCount; i++) {
                pages.push(i);
              }
              return pages;
            }
        }
    }
})

add a method in $scope and use its return value in template.

georgeawg · Accepted Answer · 2017-12-18 18:43:16Z

Use $watch to wait for the data to arrive from the server:

.directive('mypagination', function () {
    return {
        restrict: 'E',
        scope: {
            pageCount: "<",
            onPageChange: "&"
        },
        template: "{{pageCount}}",
        link: function (scope, elem, attrs) {
            scope.$watch("pageCount", function(newValue) {
                if(newValue)
                    scope.pages = [];
                    for (var i = 1; i <= newValue; i++) {
                        scope.pages.push(i);
                    }
                }
            });
        }
    }
})

In general, this type of data manupulation should be done in a directive's controller to take advantage of life-cycle hooks such as $onChanges. For more information, see AngularJS Developer Guide - Component-based Application Architecture.

Collectives™ on Stack Overflow

AngularJS directive scope binding not populated immediately in link function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related