而不更新浏览器的URL模式的弹出窗口中采用了棱角分明的UI路由器（$ stateProvider）AngularJS [英] Modal Popups in AngularJS using angular-ui-router ($stateProvider) without updating the browser url

问题描述

我的标准是：

1. 在我的应用程序中打开的任何地方一个模式


2. 请不要重写URL，把它作为从开模
前

3. 当pressing浏览器上的后退按钮不记得模态和重新打开


4. 在当前正在使用的用户界面，SREF不包括大量的标记选项

我使用$ stateProvider我angularjs应用程序来处理路由 - 我爱它是多么容易使用的UI元素SREF用的OnEnter在.STATE函数事件属性一起显示一个模式

I'm using $stateProvider in my angularjs application to handle the routing - I love how easy it is to display a modal using ui-sref element attributes along with onEnter event in the .state function.

我遇到的问题是，我希望能够在我的应用程序显示在任何页面顶部的模式没有它重定向到路由的模式弹出。

The issue I'm having is that I want to be able to display a modal over the top of any page in my application without it redirecting to the route for the modal popup.

目前我使用transitionTo模态打开前要回了previous状态，但它是混乱的，你可以看到改变模式面具背后的页面。

Currently I'm using transitionTo to get back to the previous state before the modal was opened but it's messy and you can see the page changing behind the modal mask.

有谁知道如何使用$ stateProvider打造真正的全球情态动词或将我跑我自己的模式管理器来处理它。我已经在这个地方进行确认的对话，但它是一个有点乱，因为我有很多NG-点击整个标记和$ scope.click =功能在许多控制器，$上$广播/ $发出事件一起 - 这我不不想（如果我能帮助它）。

Does anyone know how to create true global modals using $stateProvider or will I have to run my own modal manager to deal with it. I already have this in place for Confirmation dialogues but it's a little messy as I have many ng-clicks throughout the markup and $scope.click = function in many controllers along with $on and $broadcast / $emit events - which I don't want (if I can help it).

更新15/10/15

UPDATE 15/10/15

在过渡到模型状态我也不想链接直接更改/存储状态浏览器历史倒退的。

When transitioning to the model states I also don't want the url to change / store the state in the browsers back history.

更新15/10/15 - 30 previous更新后分

UPDATE 15/10/15 - 30 minutes after previous update

我设法去解决问题 - 请参阅下面的回答

I managed to work it out - see answer below.

推荐答案

我的工作了。

我有以下状态：

$stateProvider.state("default.mychannels.modalpopup", {
        url: 'XXX',
        data: { isModal: true },
        onEnter: ['$stateParams', '$state', '$modal', function ($stateParams, $state, $modal) {
            modal = $modal.open({
               ...
            });
        }],
        onExit: function () {
            modal.close();
        }
    });

正如你所看到的，我设置数据属性，说明这种状态是一个模式或没有。

As you can see, I'm setting a data property stating whether this state is a modal or not.

然后在$ stateChangeStart事件中，我做到以下几点：

Then in the $stateChangeStart event I do the following:

  $rootScope.$on('$stateChangeStart', function (event, to, toParams, from, fromParams) {

        var isModal = false;

        if (to.data != undefined) {
            isModal = to.data.isModal == undefined ? false : to.data.isModal;
        }

        if (isModal) {
            event.preventDefault();
            $state.go(to, toParams, {
                location: false, notify: false
            });

        } else {

            var requiresAuth = to.data && to.data.requiresAuth;
            var isAuthenticated = authenticationService.isLoggedIn();
            if (requiresAuth) {
                if (!isAuthenticated) {
                    event.preventDefault();

                    event.currentScope.loginConfirmedState = to.name;
                    event.currentScope.loginConfirmedStateParams = toParams;

                    // user is not logged in
                    $rootScope.$broadcast('event:auth-loginRequired');
                }
            } else {
                $rootScope.$broadcast('event:auth-loginNotRequired');
            }
        }
        $rootScope.previousState = from;
        $rootScope.previousStateParams = fromParams;

    });

这code段的重要组成部分，除了拿起的 isModal 的数据属性，都是性质正在向走功能。

The key part of this code snippet, apart from picking up the isModal data property, are the properties were are providing to the go function.

$state.go(to, toParams, {
                location: false, notify: false
            });

您需要将$ state.go选项中设置的位置，以虚假的 - 这不会更新浏览器的URL（因此不会进入浏览器历史倒退）

You need to set location to false within the $state.go options - this will not update the browser url (and therefore will not go into the browsers back history).

您还需要设置通知到$ state.go选项中的假 - 这将prevent的$ stateProvider被称为因再度$ state.go被从内部叫。这将prevent一个无限循环。

You also need to set notify to false within the $state.go options - this will prevent the $stateProvider being called again due to $state.go being called from within it. This will prevent an infinite loop.

pretty简单，但我有一个很难找到一个解决方案，但最终算出来。

Pretty simple, but I had a hard time finding a solution but eventually worked it out.

这篇关于而不更新浏览器的URL模式的弹出窗口中采用了棱角分明的UI路由器（$ stateProvider）AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！