模態彈出窗口中採用了棱角分明的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

回答

相關問題