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?

Answer 1

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.

Answer 2

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.