在AngularJs中调用$routeChangeStart之前显示确认模式，比如window onbeforeunlo

Show confirmation modal before calling $routeChangeStart in AngularJs like window onbeforeunload

本文关键字：模式确认比如 onbeforeunlo window 显示 AngularJs 调用 routeChangeStart 更新时间：2023-09-26

我能够显示一个确认模式，一旦路由开始改变，如果用户选择保持我的路由不改变，它会保持原来的路由，但再次加载表单指令，这导致表单丢失所有的复选框，输入值。它被重置为默认值。

如果用户关闭页面，我可以显示确认模式，表单状态也不会改变。

下面是我的代码:另外，请注意，我也在默认情况下为所有路由注入了一个解析(这个Angular:如何为我的应用程序的所有路由使用一个解析)

之后我调用.run()

$rootScope.$on('$routeChangeStart', function (event, newUrl, oldUrl) {
            //isLoggedIn also check URL params
            if (!Auth.isLoggedIn()) {
                $window.location.href = Auth.getLoginUrl();
            }
            ////unsaved modal start
            if ($rootScope.unsaved) {
                ngDialog.open({
                    className: 'ngdialog-theme-default unsaved-modal',
                    template: 'scripts/core/commonmodal/tplUnsavedModal.html',
                    controller: [function OpenDialogContainer() {
                        var modal = this;
                        modal.message = 'You have some unsaved changes. Do you want to leave this page?';
                        modal.stop = function () {
                            modal.processing = true;
                            ngDialog.close();
                            $rootScope.$broadcast('$routeChangeSuccess');
                        };
                        modal.continue = function () {
                            modal.processing = true;
                            ngDialog.close();
                            $rootScope.unsaved = false;
                            $location.path(newUrl.$$route.originalPath); //Go to page they're interested in
                        };
                    }],
                    controllerAs: 'modal'
                });
                //prevent navigation by default since we'll handle it
                //once the user selects a dialog option
                event.preventDefault();
            }
        });

如果形式不是$pristine和非$submitted，则设置$rootScope.unsaved = true

正如你在下面的gifvideo中看到的，在停留时，路由再次运行控制器功能。相反，我想要的是一个类似window onbeforeunload的效果。

http://recordit.co/g5T9wWkDry.gif

我通过删除这行$rootScope.$broadcast('$routeChangeSuccess');也修复了它，而不是我做了一个指令。

link: function($scope) {
                var message = 'You have some unsaved changes. Do you want to leave this page?';
                $window.onbeforeunload = function(){
                    if ($scope.unsavedChanges) {
                        return 'You have some unsaved changes. Do you want to leave this page?';
                    }
                };
                var $routeChangeStartUnbind = $rootScope.$on('$routeChangeStart', function(event, newUrl) {
                    if ($scope.unsavedChanges) {
                        $rootScope.pageloaded = true;//prevent loading icon
                        ngDialog.open({
                            appendClassName: 'unsaved-modal',
                            template: 'scripts/core/commonmodal/tplUnsavedModal.html',
                            controller: [function OpenDialogContainer() {
                                var modal = this;
                                modal.message = message;
                                modal.stop = function () {
                                    modal.processing = true;
                                    ngDialog.close();
                                };
                                modal.continue = function () {
                                    modal.processing = true;
                                    ngDialog.close();
                                    $routeChangeStartUnbind();
                                    $location.path(newUrl.$$route.originalPath); //Go to page they're interested in
                                    $rootScope.pageloaded = false;
                                    $scope.unsavedChanges = false;
                                    $window.location.reload();//$route.reload() does not reload services
                                };
                            }],
                            controllerAs: 'modal'
                        });
                        //prevent navigation by default since we'll handle it
                        //once the user selects a dialog option
                        event.preventDefault();
                    }
                });
                $scope.$on('$destroy', function() {
                    window.onbeforeunload = null;
                    $routeChangeStartUnbind();
                });
            }