albert's blog: [AngularJS] How to Unregister $scope.$watch

2015/04/23

[AngularJS] How to Unregister $scope.$watch

Problem
As I fill out values in this form and click create button

The data will insert into database, and the result will show in data grid which implement by AngularJS ng-grid.

As I click specific data row, the afterSelectionChange event will be triggered.
Owing to "預算別" and "債務別" are cascading dropdown list, the second dropdown list options will change as the value of the first dropdown list changed.
Therefore, we will watch the second dropdown list and fill in values in the form.

The problem is......if I just change the second dropdown list instead of click data grid, it will also go into watch. Because of it had start to watch, if you change the value of the second dropdwon list, it will call the watch code even you don't trigger afterSelectionChange.

Here is the code snippet

  afterSelectionChange : function (newValue, oldValue) {
     if(!angular.isUndefined($scope.grid2SelectedRow[0])){
          $scope.tab2EditBtn = false;
          $scope.dbm100eTab2FormBean.budgetCode = String($scope.grid2SelectedRow[0].budgetCode);
          //等待債務別下拉單長出來
          $scope.$watch("dbm100eTab2FormBean.debtCode", function(newValue, oldValue) {
              $scope.dbm100eTab2FormBean.debtCode = String($scope.grid2SelectedRow[0].debtCode);
              //發行額
              $scope.dbm100eTab2FormBean.debtIssueAmt    = $scope.grid2SelectedRow[0].issueAmount;
              //實收額
              $scope.dbm100eTab2FormBean.realAmount      = $scope.grid2SelectedRow[0].realAmount;
              //溢(折)價金額
              $scope.dbm100eTab2FormBean.diversityAmount = $scope.grid2SelectedRow[0].diversityAmount;
              //發行成本額
              $scope.dbm100eTab2FormBean.issueCostAmount = $scope.grid2SelectedRow[0].issueCostAmount;
              //PK
              $scope.dbm100eTab2FormBean.seqNo           = $scope.grid2SelectedRow[0].seqNo;
              
              $scope.tab2CreateBtn = true;
              $scope.tab2EditBtn = false;
              
          }, true);
                            }
 }

Solution
Therefore, we need to unregister watch if we do not need to watch.
Here is the revised code snippet

 afterSelectionChange : function (newValue, oldValue) {
    if(!angular.isUndefined($scope.grid2SelectedRow[0])){
         $scope.tab2EditBtn = false;
         $scope.dbm100eTab2FormBean.budgetCode = String($scope.grid2SelectedRow[0].budgetCode);
         //等待債務別下拉單長出來
         var unregister = $scope.$watch("dbm100eTab2FormBean.debtCode", function(newValue, oldValue) {
             $scope.dbm100eTab2FormBean.debtCode = String($scope.grid2SelectedRow[0].debtCode);
             //發行額
             $scope.dbm100eTab2FormBean.debtIssueAmt    = $scope.grid2SelectedRow[0].issueAmount;
             //實收額
             $scope.dbm100eTab2FormBean.realAmount      = $scope.grid2SelectedRow[0].realAmount;
             //溢(折)價金額
             $scope.dbm100eTab2FormBean.diversityAmount = $scope.grid2SelectedRow[0].diversityAmount;
             //發行成本額
             $scope.dbm100eTab2FormBean.issueCostAmount = $scope.grid2SelectedRow[0].issueCostAmount;
             //PK
             $scope.dbm100eTab2FormBean.seqNo           = $scope.grid2SelectedRow[0].seqNo;
             
             $scope.tab2CreateBtn = true;
             $scope.tab2EditBtn = false;
             
         }, true);
         
         //unregister watch after 3 sec.
         setTimeout(function() {
             unregister();  
         }, 3000);
  }
}

Reference
[1] http://stackoverflow.com/questions/14957614/angular-js-clear-watch

albert's blog

Total Pageviews

2015/04/23

[AngularJS] How to Unregister $scope.$watch

No comments: