変更する前にモデルを更新する必要があります

Question

私はカスタムディレクティブを作成し、変更する前にモデルを更新する必要があります。現在の火災は火災の前に変更されています。

ドロップダウンリストでページ番号を変更すると大きな問題が発生します。以前の値で警告します。私はng-mdoelがng-change火の後に更新すると思います。しかし、私はng-changeの前にngモデルの火災を望む。

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> 

今、あなたはこれだけのようなあなたのコントローラ機能を変更する必要があります。

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