Question

我正在尝试停止我的应用程序导航，如果任何表单进行了更改并尝试导航而不保存更改。

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

我正在使用角度ui.routing

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/dashboard');

    $stateProvider
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: '/application/private/views/dashboard.html'
        })
        .state('websites', {
            url: '/websites',
            templateUrl: '/application/private/views/websites.html'
        })
});

我计划实现类似于使用angularjs service singleton

的实现

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


});

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

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

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

谢谢你

Answer 1

答案是：可以将这种支票转移到服务/工厂 - 以便进一步重复使用。此外，这里有一些例子，至少要展示如何 - plunker

工厂：

.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 };
})

这样view：

<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>

控制器：

.controller('MyCtrl', function($scope, CheckStateChangeService) {

  $scope.person = { Name: "name", Age: 18 };

  CheckStateChangeService.checkFormOnStateChange($scope);

})

有一个example

Answer 2

对于服务是这样做的你是正确的，这样的事情应该这样做：

$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();
       }
    }
})

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

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

2 个答案: