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

Posted 2023-05-09

【中文标题】UI-Router：如何在切换视图时保留视图

【英文标题】：UI-Router: How to preserve views while switching views

【发布时间】：2017-02-03 07:28:13

【问题描述】：

我正在使用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 会搞砸计算。

【问题讨论】：

控制器总是被创建和销毁。使用服务保存状态

我检查了ui-router的controllerProvider，它可以动态实例化一个控制器，但它不能缓存任何控制器实例。我要重新设计布局，然后使用ng-show。

【参考方案1】：

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

【参考方案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.
);

我认为这会达到你的目的。

【讨论】：

实际上视图被ui-router销毁，当状态改变时。因此，即使我避免按照您的建议重新初始化控制器，我也无法将现有控制器与新视图绑定，新视图是相同的，但已被 ui-router 销毁并重新创建。

您可以使用我之前建议的 $rootscope 变量将条件放入您的视图中。一个plunker会很有用。你能提供一个吗？

【参考方案3】：

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

【讨论】：

感谢您提示我这条线索。我知道 ui-router 支持原生嵌套状态。但我的问题不在于嵌套结构。我有多个州，它们是平坦的。但是一个州（/logview）想要坚持下去。当我第一次单击导航栏上的“Logview”选项卡时，ui-router 会将视图呈现为新状态。当我切换到另一个选项卡时，“Logview”仍将在后台处于活动状态，但其他选项卡将始终呈现为新状态。

您需要将整个应用程序包装在一个 Root State 中，可能是抽象的，它包含您想要保留的每个信息。