Angular $ watch仅在onclick上触发一次

时间:2013-02-25 16:28:38

标签: javascript ajax dialog angularjs watch

我在包含ajax调用的角度服务中有一个函数,执行以下操作:

function performCall($scope){
   $scope.dataFail = false;

   var promise = doAjaxCall();
   promise.then(function(data){
      if(data.rootElement){
         //process...
      }else{
         $scope.dataFail=true;
      }
   }
}

我的控制器中的$ watch表达式正在查看dataFail并显示一个对话框,其中包含在确认对话框时调用performCall的选项:

$scope.$watch('dataFail', function(dataFail){
    if(dataFail){
        //open dialog
        $( "#ajaxFailurePopup" ).dialog({
            zIndex: 3003,
            title: "Note:",
            modal:true, // Disable controls on parent page
            buttons: {
                Ok: {
                    text: 'Retry >',
                    "class" : 'ppButton floatRight',
                    click:
                      function() {
                                             service.performCall($scope);
                         $("#ajaxFailurePopup").remove();
                       }
                    }
                }
            });
        };
    });

当ajax调用首次失败时,这在初始化时工作正常。但是,在此之后dataFail未对$watch进行任何更改。有人有什么建议吗?

3 个答案:

答案 0 :(得分:4)

通过在$ scope.apply中包含对performCall的调用来解决:

$scope.apply(
   service.performCall($scope);
)

dataFail标志正在performCall方法中设置。道歉。

答案 1 :(得分:2)

您的代码存在以下几个问题:

  1. 在Angular中,仅当表达式更改了值时才会调用$ watch表达式回调函数。由于您永远不会重置“dataFail”标志,因此后续调用中永远不会调用表达式。您应该在$ watch表达式中将flag变量设置为false。

  2. 在对话框中,您调用$(“#ajaxFailurePopup”)。remove();从DOM中删除#ajaxFailurePopup元素,因此对话框无法再次初始化。你应该使用$('#ajaxFailurePopup')。dialog('destroy');

  3. 工作plnkr:http://embed.plnkr.co/wcooiJ

答案 2 :(得分:0)

由于您说手表会在第一个失败的请求中触发,但在后续失败的请求中没有,因此您是否可能因成功请求而未将$scope.dataFail重置为false?如果$scope.dataFail在初始化期间仅设置为false,则该值永远不会更改,并且不会调用您的监视。如果已经为真,则将$scope.dataFail设置为true将不会触发监视,因为Angular无法判断它是否已更改。