UI-Router：如何在切換視圖時保留視圖

Question

我正在開發一個Web應用程序angular 1.x和ui-router 0.3.x.當我切換到新的視圖狀態時，相應的控制器將被實例化（數據狀態將被重置）。正如你可以從下面的代碼片斷看到的，終端（實際上這是jquery.terminal）將在每次切換到/logview時創建，並且在視圖狀態更改爲其他內容時將被銷燬。

angular.module('app') 
 
    .config(['$stateProvider', function($stateProvider) { 
 
    $stateProvider.state('logview', { 
 
     url: '/logview', 
 
     templateUrl: 'views/logview/logview.html', 
 
     controller: 'LogViewCtrl' 
 
    }); 
 
    }]) 
 
    .controller('LogViewCtrl', ['$scope', function($scope) { 
 
    var terminal = $('#terminal').terminal(); 
 
    console.log(terminal created'); 
 
    $scope.$on('$destroy', function() { 
 
     terminal.destroy(); 
 
    }); 
 
    }]) 
 
;

我想保留logview，並把它留在後臺運行，這樣當我切換回logview再次，我可以看到所有的日誌消息，因爲web應用程序啓動..

更新1：我搜索了SO，這個question有一個非常符合要求的答案，它使用ng-show來顯示/隱藏日誌視圖。這將是一種方式。不過，我需要非常小心地設計佈局，因爲我使用kendo-splitter。它將使用絕對容器的寬度和高度。一個隱藏的div將會把計算搞亂。

Answer 1

周圍的Googling，包括UI的路由器的社區檢查some discussion後，我終於找到了所謂的ui-router-extras一個出色的UI路由器插件，它提供了一個神奇的標誌sticky=true，所以我現在堅持ui-view。

Answer 2

在ui-route中，狀態和控制器的基本原理是加載並一次又一次地銷燬。您可以使用Phil的建議（使用服務）。我曾經遇到類似的問題。我想出了一個竅門。當控制器加載時，只需定義一個$ rootcope對象。然後每當控制器加載時檢查對象是否存在/定義。如果定義不要執行你的代碼。否則定義$ rootcope對象並執行代碼。

angular.module('MyApp',['ngMessages']) 
.controller('AppCtrl', function($scope,$rootscope) { 
if (!$rootscope.myCtrl){ 
     $rootscope.myCtrl = 'exist'; 
     // Code you don't want to execute in this controller again and again goes here. 

     var terminal = $('#terminal').terminal(); 
     console.log(terminal created'); 
     $scope.$on('$destroy', function() { 
      terminal.destroy(); 
     }; 
    // Code you want to execute in this controller goes here. 
}); 

我認爲這會成爲你的目的。

Answer 3

一個很好的方法來保持views或state使用Ui.Router是實現嵌套的路線：https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views