模态弹出窗口中采用了棱角分明的UI路由器（$ stateProvider）不更新浏览器的URL

我的标准AngularJS是：

打开在我的应用的任何一个模式
不要重写URL，离开它，因为从开模
之前，当按下浏览器上的后退按钮不记得模态状态，然后重新打开他们
不包括大量的标记选项时，UI-SREF正在使用

我在我的angularjs应用程序中使用$ stateProvider来处理路由 - 我很喜欢在.state函数中使用ui-sref元素属性和onEnter事件来显示模态是多么容易。

我遇到的问题是我希望能够在应用程序的任何页面顶部显示一个模式，而无需重定向到模态弹出窗口的路线。

目前，我正在使用transitionTo在打开模式之前返回到之前的状态，但它很混乱，您可以看到页面在模态蒙版后面更改。

有谁知道如何使用$ stateProvider创建真正的全局模态，还是必须运行我自己的模态管理器来处理它。我已经有了这个确认对话框，但是有点麻烦，因为我在整个标记中有很多ng单击操作，并且在$ on和$ broadcast/$ emit事件中的许多控制器中都有$ scope.click = function - 想要（如果我能帮助它）。

UPDATE 15/10/15

当转换到模型状态我也不想链接直接改变/存储的状态在浏览器后退历史。

更新15/10/15 - 上一次更新后30分钟

我设法解决它 - 见下文回答。

来源

2015-10-15 dotnethaggis

我解决了它。

我有以下状态：

$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(); 
     } 
    });

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

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

$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; 

    });

此代码段的重要组成部分，除了拿起isModal数据属性，都是性质正在向去功能。

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

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

您还需要在$ state.go选项中将notify设置为false - 这将防止由于从其中调用$ state.go而再次调用$ stateProvider。这将防止无限循环。

很简单，但我很难找到解决方案，但最终解决了它。

来源

2015-10-15 13:13:03 dotnethaggis

模态弹出窗口中采用了棱角分明的UI路由器（$ stateProvider）不更新浏览器的URL

回答

相关问题