错误:[$ rootScope:inprog] $ digest已在进行中

Question

我正在尝试当模型中的属性发生更改时发送一个表单(使用指令)(所以我看属性),但是当我触发提交事件时,我收到错误:"错误:[$ rootScope:inprog] $ digest已在进行中",如何避免此错误,这是我的代码:

app.directive("autoSubmit", function(){
  return {
    link: function(scope, element, attrs){

      scope.$watch("valid", function(){ 
        if(scope.valid == 1) {
          console.log("send form");
          element.triggerHandler("submit");
        }
      });
    }
  }
});

Heres是他的插件:http://plnkr.co/edit/cosJLkhUEKv55G8uU1Ea(重现错误,只需将文本框的值更改为1)

在此先感谢您的帮助.

Answer 1

问题是,watch当您尝试触发事件时,已经有$ digest周期运行(显然是一个).所以你应该等到它完成并在下一个事件中提升事件.你可以$timeout为此服务:

app.directive("autoSubmit", function($timeout) {
    return {
        link: function(scope, element, attrs) {
            scope.$watch("valid", function() {
                if (scope.valid == 1) {
                    console.log("send form");
                    $timeout(function() {
                        element.triggerHandler('submit');
                    })
                }
            });
        }
    }
});

演示:http://plnkr.co/edit/bRXfi9kFVFICgFUFvtZz？p =preview

另一种方法是ngSubmit使用$parse服务自己手动调用函数:

app.directive("autoSubmit", function($parse) {
    return {
        link: function(scope, element, attrs) {
            scope.$watch("valid", function() {
                if (scope.valid == 1) {
                    console.log("send form");
                    var submitHandler = $parse(attrs.ngSubmit)(scope);
                    if (submitHandler) {
                        submitHandler();
                    }
                }
            });
        }
    }
});

演示:http://plnkr.co/edit/vNI8OwfnxSQJ6tQLpFqZ？p = preview