阻止DOM重繪的對話框

Question

我有一個構建在角度的頁面。該頁面顯示一組分頁顯示的數據。我可以通過搜索框搜索頁面。由於關於每個頁面包含的一些自定義規則，分頁是手動構建的。但是構建分頁的方法是在buildPages（）方法中設置的，從那裏開始構建頁面直接更新頁面繪製的範圍。

因此，典型的搜索工作如下：

輸入搜索。

Watcher捕獲搜索上的更改。

觀察者設置搜索變種。

觀察者調用buildPages（）;

buildPages重建分頁並更新範圍。

作用域更新，分頁和顯示數據被重繪。

現在所有這些工作都很好。但我需要添加一個對話框來詢問用戶是否要更改搜索或將其保留，並且此對話框有時僅根據特定條件顯示。

我的問題是，如果我打開一個對話框，並從對話框中的按鈕單擊調用buildPages（），它會正確更新範圍，但不會重新繪製頁面。

因此，例如，您有50頁，並顯示第1頁（共50頁）。然後鍵入搜索。搜索過濾掉了這50頁中的25頁，剩下25頁。您最初所在的頁面也被過濾掉。如果沒有該對話框，輸入搜索將導致您在第一個過濾頁面的1/25頁上出現。但是，從對話框中觸發搜索仍然會在第1/50頁的未過濾頁面的第1頁上顯示。點擊分頁控件上的下一個將正確帶您進入第二個已過濾頁面2/25，然後從那裏點擊會在第1/25頁正確顯示過濾頁面。

即使執行像觸發懸停一樣簡單的操作，也會導致頁面正確重繪。

這是怎麼回事？爲什麼阻止重畫的對話框？

下面是我在觀察者中使用的代碼（稍微簡化）。

$scope.$watch('searchText', function(newVal, oldVal) { 
    currentSearch = newVal; 
    if(newVal !== oldVal){ 
     if(displayFlag){ 
      j$("#dialog-confirm").dialog({ 
       resizable: false, 
       width:450, 
       height:240, 
       modal: true, 
       buttons: { 
        "Search": function() { 
         j$(this).dialog("close"); 
         buildPages(); 
        }, 
        Cancel: function() { 
         j$(this).dialog("close"); 
         return false; 
        } 
      }}); 
     } 
     else 
     { 
      buildPages(); 
     } 
    } 
}); 

我試過在搜索點擊中包含返回true或false。我也嘗試在搜索點擊中切換對話框close和buildPages的順序。

Answer 1

我不確定j$()是否是一個角度庫。看來它可能不是。

請記住，Angular不知道任何類型的事件或更改，除非它自己，因此，如果您正在使用jQuery或其他類似的庫執行操作，那麼在執行調用之後，可能需要調用$scope.$digest();或$scope.$apply()來觸發角度摘要循環。

scope.$digest()只會在當前範圍上消防觀察員，scope.$apply（推薦）將評估傳遞的功能並運行$rootScope.$digest()。

buttons: { 
    "Search": 
    function() { 
     j$(this).dialog("close"); 
     buildPages(); 
     $scope.$apply(); //After function is executed a cycle will occur. 
    }, 
    Cancel: function() { 
    j$(this).dialog("close"); 
     return false; 
    } 
    } 

我相信你的情況，視圖可能沒有被更新，因爲角度沒有被告知執行摘要循環。