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