4

当用户尝试单击浏览器后退按钮并且表单上有脏数据时，它会显示确认。

这是角度js控制器代码

   function MyCtrl2($rootScope, $location, $scope) {

    $rootScope.$watch(function () {
        return $location.path();
    },

    function (newValue, oldValue) {
        if ($scope.myForm.$dirty) {
            var a = confirm('do you');
            if (!a) {
                 //how to prevent this redirect
            }
        }
    },
    true);
}

MyCtrl2.$inject = ['$rootScope', '$location', '$scope'];

但是如何防止重定向

4

2 回答 2

13

仅供参考，现在可以在 Angular 中取消路线。

$scope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
  event.preventDefault();
});
于 2013-06-27T03:05:38.700 回答
3

您要解决的整个问题的根源有两个 DOM 事件：onhashchange 和 onbeforeunload。可以检查和阻止 onhashchange，但是，浏览器上的后退按钮不会触发 onhashchange。更糟糕的是，如果页面没有重新加载，onbeforeunload 将不会触发，这意味着如果您点击返回以转到页面上的上一个哈希，它不会触发。正因为如此，如果您按 Back to 去上一条路线，它仍然会离开您的表格。

目前在 Angular 的待办事项列表上还有一个悬而未决的问题，即他们将如何允许取消路线。我认为哈希问题的后退按钮是目前阻碍它们的原因。

因此，如果您想在表单被编辑后阻止所有导航离开您的表单，那么最后您可能想要重新设计您的解决方案以做一些更激烈的事情。类似于将表单正在编辑的所有数据存储在 $rootScope 中，以及一个表明它脏但不完整的标志，然后将事件处理程序添加到 routeChangeStart 以检查这些值并将您发送回表单。

以下是它的工作原理（如果你有兴趣的话，还有一个笨拙的人）：

app.config(function($routeProvider) {
  //set up the routes. (Important because we're going to navigate
  // BACK to them.)
  $routeProvider.when('/Form', {
    controller: 'FormCtrl',
    templateUrl: 'form.html'
  }).otherwise({
    controller: 'HomeCtrl',
    template: '<h3>Home</h3>' 
  });
});

app.run(function($rootScope, $location){ 
  //set up your rootScope formData object.
  $rootScope.formData = {};

  //add a routing event to check the route
  // and whether or not the data has been editted and then 
  // send it back to the proper form.
  $rootScope.$on('$routeChangeStart', function() {
    if($location.path() != '/Form' && $rootScope.formData.dirty && 
      !$rootScope.formData.complete && !confirm('Do you want to leave this form?')) {
      $location.path('/Form');
    }
  });

  //handle outright navigating away from the page.
  $(window).on('beforeunload', function() {
     if($rootScope.formData.dirty && 
      !$rootScope.formData.complete) {
         return 'Are you sure you want to navigate away from this form?';
     }
  });
});

app.controller('FormCtrl', function($scope) {
  $scope.$watch(function (){
    return $scope.myForm.$dirty;
  }, function(dirty) {
    $scope.formData.dirty = $scope.formData.dirty | dirty;
  })
});

其他想法

最初我制定了一个指令来帮助解决这个问题，但我意识到由于我上面提到的问题，它不会起作用。无论如何，为了后代的缘故，这里是：

app.directive('form', function ($window){
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {

      //check for a prevent-if-dirty attribute on your form tag
      if(attrs.preventIfDirty !== undefined) {

        // first off, stop routing hash changes from 
        // changing the page.
        scope.$on('$locationChangeStart', function(event) {
          if(scope.testForm.$dirty) {
            event.preventDefault();
          }
        });

        // a little setup for our next piece
        var formName = attrs.name;
        function showWarning() {
          return 'You have changed the form';
        }

        // Now stop browser navigation from moving away
        // from your dirty form.
        scope.$watch(function (){
          return scope[formName].$dirty;
        }, function(dirty) {
          if(dirty) {
             $(window).on('beforeunload', showWarning);
          } else {
             $(window).off('beforeunload', showWarning);
          }
        });
      }
    }
  };
});

这是一个展示它的plunker。

于 2013-02-15T21:23:52.610 回答