如果使用 $dirty 和 $pristine 对表单进行任何更改，则不允许导航 [英] not allow to navigate if any changes on form using $dirty and $pristine

问题描述

如果任何表单进行了更改，我会尝试在我的应用程序上停止导航，并尝试在不保存更改的情况下进行导航.

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

我正在使用 angular ui.routing

app.config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/dashboard');$stateProvider.state('仪表板', {网址:'/仪表板'，templateUrl: '/application/private/views/dashboard.html'}).state('网站', {网址:'/网站'，templateUrl: '/application/private/views/websites.html'})});

我打算实现类似使用 angularjs 服务单例的实现

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

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

app.controller('formSubmitCtrl', function ($scope,dirtyCheckService){dirtyCheckService.checkForm($scope).then(function(){//允许导航}，功能(){//不允许}});

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

谢谢

解决方案

答案是:可以将这种检查移到服务/工厂中 - 以便进一步重用.此外，这里有一些示例至少展示了如何 - plunker

工厂:

.factory('CheckStateChangeService', function($rootScope){var addCheck = 函数($scope){var removeListener = $rootScope.$on('$stateChangeStart'，函数(事件，toState，toParams，fromState，fromParams){如果($scope.form.$pristine){返回;}var shouldContinue = confirm("表格已更改" +"，要不保存就继续");如果(应该继续){返回;}event.preventDefault();});$scope.$on("$destroy", removeListener);};返回 { checkFormOnStateChange : addCheck };})

并且有一个像这样的 view:

<表格名称=表格"><dl><dt>姓名</dt><dd><input type="text" ng-model="person.Name"/><dt>年龄</dt><dd><input type="number" ng-model="person.Age"/></dl></表单>

和控制器:

.controller('MyCtrl', function($scope, CheckStateChangeService) {$scope.person = { Name: "name", Age: 18 };CheckStateChangeService.checkFormOnStateChange($scope);})

有一个示例

I'm trying to stop navigation on my application if any form made changes and try to navigate without saving changes.

i want to show a dialog to show whether to save navigate or discard or cancel navigation action.

i'm using angular 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'
        })
});

i was planning to have implementation something like using angularjs service singleton

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


});

and on controller level i can write a submit click like this

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

i'm not sure is there easy way exist already or not

thanks you

解决方案

The answer is: It is ok to move that kind of check into service/factory - for some further reuse. Also, here is some example at least to show how to - plunker

A factory:

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

And having a view like this:

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

And the controller:

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

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

  CheckStateChangeService.checkFormOnStateChange($scope);

})

There is an example

这篇关于如果使用 $dirty 和 $pristine 对表单进行任何更改，则不允许导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！