javascript - Angularjs 需要在 ng-change 之前更新 ng-model

Question

我创建了自定义指令，并希望在 ng-change 触发之前更新 ng-model。目前 ng-change 在 udpate ng-mdoel 值之前触发，下面是我的代码。

当我更改下拉列表中的页码时，出现了主要问题。它会以先前的值发出警报。我认为 ng-mdoel 在 ng-change 之后更新。但我希望 ng-model 在 ng-change 之前启动。

app.directive('bottomPagination', function () {
    var directive = {
        templateUrl: '/App/Common/directives/bottomPagination.html',
        restrict: 'A',
        replace: true,
        scope: {
            currentPage: '=',
            changePageSize: '&'
        }
    };
    return directive;
});

//here is html directive (/App/Common/directives/bottomPagination.html)

       <select  id="pagesizeddl" ng-model="pageSize" ng-change="changePageSize()">
                            <option>5</option>
                            <option>10</option>
                            <option>20</option>
                            <option>30</option>
                        </select>

// here is my html page where i used directive


<div data-ng-controller="ProductsList as vm">
                <div data-bottom-pagination
                        data-page-size="vm.paging.pageSize"
                        data-change-page-size="vm.changePageSize()"
                         >
                    </div>
  </div>

// This is contrller
(function () {
    // Start Products List function
    var ListControllerId = 'ProductsList';
    angular.module('app').controller(ListControllerId,
        ['$scope', ListController]);

    function ListController($scope) {
        var vm = this;

        vm.paging = {
            pageSize: 10
        }; 

        vm.changePageSize = changePageSize;

        function changePageSize() {
            alert(vm.paging.pageSize);
        }
    }
})();

Answer 1

嗨，我最近遇到了同样的问题。

我的最佳实践解决方案是在指令模板的 ng-change 函数中添加一个参数。您需要将参数添加为 JSON 对象!

<select  id="pagesizeddl" ng-model="pageSize" ng-change="changePageSize({pageSize:pageSize})">
                        <option>5</option>
                        <option>10</option>
                        <option>20</option>
                        <option>30</option>
                    </select>

(JSON 对象的)属性“pageSize”将与指令函数 vm.changePageSize(pageSize) 的参数匹配。因此两者必须具有相同的名称!

<div data-ng-controller="ProductsList as vm">
            <div data-bottom-pagination
                    data-page-size="vm.paging.pageSize"
                    data-change-page-size="vm.changePageSize(pageSize)"
                     >
                </div>

现在你只需要像这样改变你的 Controller 功能:

function changePageSize(pageSize) {
        alert(pageSize);
    }