UI-Router：如何在切换视图时保留视图

Question

我正在使用angular 1.x 和ui-router 0.3.x 开发一个webapp。当我切换到新的视图状态时，相应的控制器将被实例化（数据状态将被重置）。从下面的代码sn-p可以看出，每次切换到/logview时都会创建终端（其实就是jquery.terminal），当视图状态变成别的东西时会被销毁。

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 时，我可以看到自 webapp 启动以来的所有日志消息..

更新 1：我搜索了 SO，这个 question 的答案非常符合要求，它使用 ng-show 显示/隐藏日志视图。这将是一条路要走。但是我需要非常仔细地设计布局，因为我使用kendo-splitter。它将使用绝对容器宽度和高度。隐藏的 div 会搞砸计算。

Answer 1

经过谷歌搜索，包括从ui-router的社区查看some discussion，我终于找到了一个很棒的ui-router插件，叫做ui-router-extras，它提供了一个神奇的标志sticky=true，所以我现在坚持ui-view .

Answer 2

在ui-route中，状态和控制器的基本原理是一次又一次地加载和销毁。您可以使用 Phil 的建议（使用服务）。我曾经遇到过类似的问题。我想出了一个窍门。当控制器加载时，只需定义一个 $rootscope 对象。然后每次控制器加载时检查对象是否存在/定义。如果定义不执行你的代码。否则定义 $rootscope 对象并执行代码。

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

使用Ui.Router 保持views 或state 的好方法是实现嵌套路由：https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views