Question

我试图从我正在创建的指令中观察模型。我正在创建一个分页指令，我传递了总记录数和当前页码（我从服务器获得）。基本上，我根据记录总数和用户对每页记录数的选择来计算页数。计算出的数字被推送到数组，并且数组被绑定到下拉列表。下拉列表的选定值绑定到一个模型，该模型可以是用户的选择，也可以根据用户执行的其他一些交互从服务器更新（例如更改每页的记录数））。下面 - 我的代码。

我的指令定义：

<paginator total-count="al.pager.totalElements" page-number="al.pager.number"></paginator>

我的指令实现（paginator.js）：

scope: {
    totalCount: '=',
    pageNumber: '='
},
link: function (scope) {
    scope.pageList = [];
    getPageNumbers() {
        noOfPages = Math.ceil(scope.totalCount / scope.pageSize); // pageSize is number of records to show in each page
        scope.pageList.length = 0;
        for (let i = 1; i <= noOfPages; i++) {
            scope.pageList.push(i);
        }
    }

    getPageNumbers();
}

我的指令视图（paginator.html）：

<md-input-container>
    <md-select ng-model="pageNumber" ng-change="pageNumberChange()">
        <md-option ng-value="page" ng-repeat="page in pageList">{{page}}</md-option>
    </md-select>
</md-input-container>

现在我想要完成的是，当数据库中的记录总数发生变化时，我希望更新页面下拉数量，并选择显示页面编号的选定值。数据库。

所以，在指令中，我正在观看＆＃34; totalCount＆＃34;变量，当它发生变化时，我重新计算了这样的页数。

link: function (scope) {
    getPageNumbers() {
        noOfPages = Math.ceil(scope.totalCount / scope.pageSize); // pageSize is number of records to show in each page
        for (let i = 1; i <= noOfPages; i++) {
            scope.pageList.push(i);
        }
    }
    scope.$watch('totalCount', getPageNumbers(), true);
}

问题是，当我从服务器获取新的totalCount时，我的getPageNumbers（）方法不会被调用。由于未填充下拉列表，因此不会显示所选值。谁能看到我失踪的东西？非常感谢任何帮助。

Answer 1

scope.$watch中的监听器（第二个参数）应该是一个函数，但是你传递getPageNumbers()的结果而不是函数本身。

尝试scope.$watch('totalCount', getPageNumbers, true)

当监视变量在指令外异步更新（来自服务器）时，$ watch不会触发指令内部

1 个答案: