用戶界面路由器中的自定義後退按鈕

Question

我正在使用UI-Router，並試圖更新我的頂部導航欄中的鏈接，以便用戶選擇「返回」 - 但不一定是他們剛纔的位置來自，但邏輯倒退。也就是說，如果他們在客戶端編輯頁面，後退按鈕會將他們帶到客戶列表中，與任務相同等。

導航欄是「根」定義狀態的一部分 - 請參閱頂部工具欄@root下面。

.state('root', { 
    abstract: true, 
    url: '', 
    views: { 
     '@': { 
      templateUrl: '../partials/icp_index.html', 
      controller: 'AppController as AppCtrl' 
     }, 
     'left-nav@root': { 
      templateUrl: '../partials/left-nav.html' 
     }, 
     'right-nav@root': { 
      templateUrl: '../partials/right-nav.html' 
     }, 
     'top-toolbar@root': { 
      templateUrl: '../partials/toolbar.html' 
     } 
    } 
}) 

在我的其他國家，我通過params選項填充backButton對象。

.state('root.tasks.detail', { 
    url: '/:taskId/edit', 
    views: { 
     'content@root': { 
      templateUrl: '../partials/edit-task.html', 
      controller: 'TaskDetailController as TaskDetailCtrl' 
     } 
    }, 
    params: { 
     backButton: { 
      text: 'Tasks', 
      route: 'root.tasks' 
     } 
    } 
}) 

在我的應用程序的run方法，我稱之爲定製服務，具體如下：

.run(function($rootScope, NavigationService) { 
    $rootScope.$on("$stateChangeError", console.log.bind(console)); 
    $rootScope.$on("$stateChangeSuccess", function() { 
     $rootScope.backButton = NavigationService.updateBackButton(); 
    }); 
}) 

這裏是服務：

.service('NavigationService', function() { 
    this.updateBackButton = function($state) { 
     var backButton = $state.params.backButton; 
     return backButton; 
    } 
}) 

而且在工具欄上，我用的是backButton對象的路由屬性以如下定義ui-sref：

ui-sref="{{ backButton.route }}" 

但是，backButton對象似乎沒有更新。每當狀態發生變化時，該服務肯定會運行 - 讓控制檯登錄進行檢查。

奇怪的是，瀏覽到以下狀態時，代碼工作 - 但不是與我的任何其他複式狀態：

.state('root.clients.dashboard', { 
    url: '/:clientId/dashboard', 
    views: { 
     'content@root': { 
      templateUrl: '../partials/client-dashboard.html', 
      controller: 'ClientDetailController as ClientDetailCtrl' 
     } 
    }, 
    params: { 
     backButton: { 
      'text' : 'Clients', 
      'route' : 'root.clients' 
     } 
    } 
}) 

我欣賞有可能是這樣做的更好的方法，而且可能不使用$ rootScope - 這個名字本身讓我覺得我不應該改變它的屬性！

任何幫助將不勝感激。

Answer 1

其實有一個與$ rootScope一個簡單的解決方案：

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) { 
     $rootScope.previousState = from; 
    }); 
    }]); 

的rootScope是，就在主父範圍，所以不要affraid發揮它。你也可以用以前的狀態對本地存儲做同樣的事情