Question

我有一个内置角度的页面。该页面显示了一组分页的数据。我可以使用搜索框搜索该页面。由于关于每个页面的内容的一些自定义规则，分页是手工构建的。但是构建分页是在buildPages（）方法中设置的，并且从那里开始构建直接更新页面绘制范围的页面的简单调用。

通常，搜索的工作原理如下：

输入搜索。

Watcher捕捉到了搜索的变化。

Watcher设置搜索变量

Watcher调用buildPages（）;

buildPages重建分页并更新范围。

范围是更新，分页和显示的数据被重新绘制。

现在所有这一切都很好。但我需要在对话框中添加一个对话框，询问用户是否要更改搜索或保留搜索，并且此对话框有时仅根据特定条件显示。

我的问题是，如果我打开一个对话框并从对话框中的按钮单击调用buildPages（），它会正确更新范围，但它不会重绘页面。

因此，例如，您有50页，并且您显示第1页的50页。然后输入搜索。搜索过滤掉了这50页中的25页，剩下25页。您最初访问的页面也已过滤掉。如果没有对话框，输入搜索将导致您出现在第一个过滤页面的第1/25页上。但是，从对话框触发搜索仍会显示在未过滤页面的第1页，第1/50页。单击分页控件上的下一步将正确地将您带到第二个过滤页面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。我还尝试在搜索点击中切换对话框关闭和buildPages的顺序。

Answer 1

我不确定j$()是否是一个角度库。它似乎可能不是。

请记住，Angular不知道除了它自己之外的任何类型的事件或更改，因此，如果您使用jQuery或其他类似.dialog的库执行操作，则在执行调用之后，您可能需要致电$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;
     }
  }

我相信您的情况可能没有更新视图，因为没有告知角度执行摘要周期。

禁止DOM重绘的对话框

1 个答案: