Question

我可以在路线开始变化时显示确认模式，如果用户选择保持我的路线不变，它会保持原始路线，但会再次加载表格指令，这会导致表格丢失所有复选框，输入值。它会重置为默认值。

如果用户关闭了页面，我可以显示确认模式，表单状态也不会更改。保留所有值。

以下是我的代码：另外，请注意我也默认为所有路线注入解决方案（此Angular : How use one resolve for all the routes of my application）

之后我打电话给.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();
            }

        });

我设置$rootScope.unsaved = true如果表单不是$pristine而不是$submitted

正如您在下面的gifvideo中看到的那样，在停留路径上再次运行控制器功能。相反，我想要的是window onbeforeunload相似的效果。

http://recordit.co/g5T9wWkDry.gif

Answer 1

我修正了它只是删除了这一行$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();
                });
            }

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

1 个答案: