Question

$ locationChangeStart在页面重定向后执行。所以，即使我得到错误消息页面将已被重定向。如何在执行$ locationChangeStart之后进行页面重定向。

以下是我链接到“主页”和“关于”页面的index.html页面。

<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">   
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
    <script src="index.js"></script>
    <!--<script src="homecontroller.js"></script>-->
</head>
<body ng-app="routerApp" ng-controller="homeCntrl">
    <form name="form.myForm">
        <nav class="navbar navbar-inverse" role="navigation">
            <ul class="nav navbar-nav">
                <li><a ui-sref="home">Home</a></li>
                <li><a ui-sref="about">About</a></li>
            </ul>
        </nav>
        <div class="container">
            <div ui-view></div>
        </div>
        </form>
</body>

下面是index.js页面，其中我编写了显示错误消息的代码

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
       .state('home', {
           url: '/home',
           templateUrl: 'home.html'
       })
        .state('about', {
            url: '/about',
            templateUrl: 'about.html'
        })
});

routerApp.controller('homeCntrl', ['$scope', '$rootScope', function ($scope, $rootScope) {
    $scope.$watch('form.myForm.$dirty', function (dirty) {
        if (dirty) {
            $rootScope.preventNavigation();
        }
        else {
            $rootScope.allowNavigation();
        }
    });

    $scope.form = {};
    $scope.Save = function () {
        alert('Save');
        $scope.form.myForm.$setPristine();
    }
}]);

routerApp.directive('confirmOnExit', function () {
    return {
        link: function ($scope, elem, attrs) {
            window.onbeforeunload = function () {
                if ($scope.form.myForm.$dirty) {
                    return "The form is dirty, do you want to stay on the page?";
                }
            }
            $scope.$on('$locationChangeStart', function (event, next, current) {
                if ($scope.form.myForm.$dirty) {
                    if (!confirm("The form is dirty, do you want to stay on the page?")) {
                        event.preventDefault();
                    }
                }
            });
        }
    };
});

以下是home.html页面

  Name: <input name="input" ng-model="myModel.text">
    <p>myModel.text = {{form.myModel.text}}</p>
    <p>$pristine = {{form.myForm.$pristine}}</p>
    <p>$dirty = {{form.myForm.$dirty}}</p>
    <button type="submit" ng-click="Save()">Save</button>

所以在上面的例子中，现在我在'主页'页面，我填写了输入字段，现在我的页面很脏。现在，当我点击“关于”时，它将重定向到“关于”页面，然后它将执行$ locationChangeStart，它将显示错误代码。如何在重定向页面之前首先显示错误消息。

下面是plunker（注意：ui-sref在这里不起作用，但确切的代码在我的VS中正常工作。我无法弄清楚原因。但我的问题是如何首先检查$ locationChangeStart然后重定向if它不脏）

https://plnkr.co/edit/LoGGusldqb74Zf5QGoOJ?p=preview

问题：在重定向页面后$ locationChangeStart正在执行

0 个答案: