掛鉤到angular-ui-router $轉換時出現意外的window.confirm行爲API

我已經在我的一個表單上設置了偵聽器設置，它檢查通過角度路由器發生的狀態轉換。當偵聽器被觸發時，它會檢查表單是否髒，如果是則拋出一個窗口。確認警報提示用戶可能有未保存的更改。

所有的，看起來像這樣

this.setListener('form.dirty-check', this.setExitCheck); 

setListener = (el, cb) => { 
    if ($(el).length) { 
     cb(); 
    } else { 
     setTimeout(() => { 
      this.setListener(el, cb); 
     }, 500); 
    } 

}; 

setExitCheck =() => { 
    this.$transitions.onStart({},() => { 
     if ($('#compForm').hasClass('ng-dirty')) { 
      if (window.confirm('You may have unsaved changes! Press ok to continue, or press cancel to go back and save your work.') === false) { 
       return false; 
      } else { 
       return true; 
      } 
     } 
    }); 
};

此代碼是相當不錯的，除了意外行爲奇異位。

出於某種原因，當我點擊「確定」離開頁面時，轉換就會觸發，但如果我返回頁面並再次嘗試，我現在必須打兩遍，然後獲取兩個窗口。確認警報。如果我第三次回去嘗試，我會得到三個window.confirm警報，並且必須在它們三個上點擊Ok。我嘗試過接收10條警報，並且必須按10次。

雖然我刷新頁面，但它似乎重置，我再次啓動它。馬上工作，然後拿兩個OK，然後三個，等等。

有誰知道可能會發生什麼導致這種增量行爲？

來源

2017-05-09 Chris

角不會清除監聽你，你必須手動清除它們。在這裏你可以在'stateChangeStart'/'stateChangeSuccess'事件清除監聽器。 – Pengyy

看到這就是我的想法，但$ transitions.onStart（）方法的文檔聲明它返回一個立即調用的函數，它可以註銷自身。雖然我可能會誤解規範。我是否必須以某種方式將註銷的方法返回給Fn？這是onStart（）方法的規範 https://ui-router.github.io/ng1/docs/latest/classes/transition.transitionservice.html#onstart – Chris

yeap，我想你必須手動調用它。 – Pengyy

ui-router不會自動清除聽衆，因此您必須手動清除它。

和$transitions.onStart返回一個函數，該函數會在調用時摧毀偵聽器的鉤子。文檔here（最後一行）。

語法相同$ rootScope的註銷事件，是指How can I unregister a broadcast event to rootscope in AngularJS?

$scope.onStartHandler = this.$transitions.onStart(...); 

$scope.$on('destroy', function() { 
    $scope.onStartHandler(); 
});

來源

2017-05-09 16:01:41 Pengyy

掛鉤到angular-ui-router $轉換時出現意外的window.confirm行爲API

回答

相關問題