Angularjs 如果使用$dirty和$pristine对表单进行任何更改，则不允许导航

如果任何表单发生更改，我将尝试停止应用程序上的导航，并尝试在不保存更改的情况下导航

我想显示一个对话框，显示是保存导航还是放弃或取消导航操作

我用的是角的

我计划实现一些类似于使用angularjs服务singleton的东西

app.service('dirtyCheckService', function ($rootScope, dialogService){


});

在控制器级别，我可以像这样写一个提交点击

app.controller('formSubmitCtrl', function ($scope, dirtyCheckService){
dirtyCheckService.checkForm($scope).then(function(){
   //allow navigation
   },function(){
   //not allowed}
});

我不确定是否有简单的方法存在

---

谢谢

答案是：可以将这种检查转移到服务/工厂，以便进一步重用。此外，这里有一些示例，至少可以说明如何-

工厂：

.factory('CheckStateChangeService', function($rootScope){

  var addCheck = function($scope){ 

    var removeListener = $rootScope.$on('$stateChangeStart'
        , function (event, toState, toParams, fromState, fromParams) {

          if($scope.form.$pristine)
          {
            return;
          }

          var shouldContinue = confirm("The form has changed" +
                 ", do you want to continue without saving");
          if(shouldContinue)
          {
            return;
          }
          event.preventDefault();
    }); 

    $scope.$on("$destroy", removeListener);
  };

  return { checkFormOnStateChange : addCheck };
})

并且有这样一个

视图

：

<div>
    <form name="form">

      <dl>
        <dt>Name</dt>
        <dd><input type="text" ng-model="person.Name" />
        <dt>Age</dt>
        <dd><input type="number" ng-model="person.Age" />
      </dl>

    </form>
</div>

---

有一个

关于服务是实现这一点的方法，您是对的，类似这样的事情应该做到：

$scope.$watch("myForm.$dirty",function(v){
     dirtyCheckService.setDirty(v);
},true)

然后可能在应用程序中的某个位置，例如run block：

app.run(function($rootScope,dirtyCheckService){
    $rootScope.$on('$locationChangeStart', function (event, next, prev) {
       if(dirtyCheckService.isFormDirty()){
         event.preventDefault();
       }
    }
})

---

当然，只有在用户保存更改后将表单设置为原始状态时，上述操作才会起作用。

如果这有帮助，那就太好了。

ui路由器

真是一段很棒的代码；）享受它；）是的。对于脏检查，我已经找到了很好的替代方法，比如说，有一个直接下载链接，它的行为如何，我怀疑它是否仍然会显示警告消息。我将对“$locationChangeStart”事件值进行调整。我从未看到触发“$stateChangeStart”事件，我认为它不是有效的角度事件-至少，我在angular源代码的任何地方都看不到它。@icfantv$stateChangeStart事件是一个ui路由器事件：是。这是一年半以前的事了。我在18个月里学到了很多。

$scope.$watch("myForm.$dirty",function(v){
     dirtyCheckService.setDirty(v);
},true)

app.run(function($rootScope,dirtyCheckService){
    $rootScope.$on('$locationChangeStart', function (event, next, prev) {
       if(dirtyCheckService.isFormDirty()){
         event.preventDefault();
       }
    }
})