AngularJS指令范围绑定未在链接函数中立即填充

Posted 2021-05-04

我正在编写以下指令：

.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);
            }
        }
    }
})

我的问题是$scope.pageCount循环中的for设置为0，但模板中的{{pageCount}}正在呈现正确的值。

在html中，指令被调用如下：

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

为什么在pageCount函数中link的值为0，但在页面上正确呈现？

答案

当你的link函数执行时，pageCount可以是0，因为它绑定到mjaController.pages.length属性，我猜是从API检索并且是async调用。一旦mjaController.pages充满了一些数据，那么pageCount被设置为它的长度并通过template循环显示在$digest上，但link函数将不再执行。为了使其按预期工作，请执行以下操作

.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;
            }
        }
    }
})

在method中添加$scope并在模板中使用其返回值。

另一答案

使用$watch等待数据从服务器到达：

.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);
                    }
                }
            });
        }
    }
})

通常，这种类型的数据操作应该在指令的控制器中完成，以利用life-cycle hooks，例如$onChanges。有关更多信息，请参阅AngularJS Developer Guide - Component-based Application Architecture。