CODEWITHSUNDEEP
javascriptangularjs
Karan Kumar
Karan Kumar

Reputation: 5

Angularjs need ng-model update before ng-change

I create customdirective and want to ng-model update before ng-change fire. Currently ng-change fire before udpate ng-mdoel value below is my code.

Main issue is coming when i change page number in dropdown list. It alert with previous value. I think ng-mdoel update after ng-change fire. but i want ng-model fire before 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);
        }
    }
})();

Upvotes: 0

Views: 681

Answers (1)

walki12
walki12

Reputation: 220

Hi I recently had the same problem.

My best practice solution is to add a parameter in the ng-change function in your directive template. You need to add the parameter as an JSON Object!

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

The property "pageSize" (of the JSON Object) will be matched with the parameter of your directive function vm.changePageSize(pageSize). So it is necessary that both have the same name!

<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>

Now you only have to alter your controller function like this:

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

Upvotes: 2

Related Questions