Question

当我们在一个状态到另一个状态之间切换时，我可以检查unsaved changes，我可以在将一个页面移动到另一个页面之前询问用户确认但是在同一视图中我有多个表单，如果我首先在一个表单到另一个表单之间切换我必须向用户发送消息你确定要保留离开页面而不保存数据然后只有我可以移动到另一个表单我该怎么做。< / p>

下面相同视图中的多个表单示例我已经提到过

<div ng-switch-when="formTab">
  <div ng-include="'/views/tmpl/workForm.html'"></div>
</div>
<div ng-switch-when="effortTab">
   <div ng-include="'/views/tmpl/workEffort.html'"></div>
</div>

在上面的示例中，当从 formTab 转移到 effortTab 时，我需要显示未保存的更改消息

Answer 1

使用form的$dirty属性：

console.log(myForm.$dirty);

Plunker

Answer 2

我得到了解决方案而不是使用ng-switch我们可以使用具有父状态的嵌套状态。

使用unsavedChanges directive我们可以自动检查当前表单中是否存在任何未保存的数据。如果条件匹配，则该指令将警告用户这将基于ui-state工作，因此它将在我们注入时自动检查指令，无需手动执行..

以下示例

$stateProvider.state('edit', {
abstract: true,
url: '/edit',
templateUrl: 'edit.html',
controller: function($scope) {
  $scope.model = {};
  $scope.validator = {
    basic: null,
    extended: null,
    isValid: function() {
      return this.basic && this.extended;
    } 
  };
 }}).
   state('edit.formTab', {
   url: '/formTab',
   templateUrl: 'formTab.html',
   controller: function($scope) {
   $scope.$watch('formTab.$valid', function(value) {
       $scope.validator.formTab= value;
    });
  }}).
   state('edit.effortTab', {
   url: '/effortTab',
   templateUrl: 'effortTab.html',
   controller: function($scope) {
   $scope.$watch('effortTab.$valid', function(value) {
      $scope.validator.effortTab= value;
   });
 }});

我们可以使用以下链接： http://plnkr.co/edit/OyVBpp?p=preview

如何在同一页面中切换嵌套视图时检查未保存的更改？

2 个答案: