angularjs - 具有累积状态的Angularjs ui-router

Question

我正在尝试创建一个界面，其中每个状态，在退出该状态后，其视图仍保留在 DOM 上，我正在尝试使用下面的代码在逻辑上是正确的，每次我转换到另一个状态时，previuos 状态的视图从 DOM 中删除。

    (function() {

      this.plotter = angular.module('plotter', ['ui.state']);

      this.plotter.config([
        '$stateProvider', function($stateProvider) {
          return $stateProvider.state('plotter', {
            url: '/',
            template: '<div ui-view="scoresview"></div><div ui-view="plotsview"></div>',
            controller: function() {
              return console.log("main");
            }
          }).state('plotter.scores', {
            views: {
              'scoresview': {
                template: '<div>scores!</div>',
                controller: function() {
                  return console.log("scores!");
                }
              }
            },
            onEnter: function() {},
            onExit: function() {}
          }).state('plotter.plots', {
            views: {
              'plotsview': {
                template: '<div>plos!</div>',
                controller: function() {
                  return console.log("plots!");
                }
              }
            },
            onEnter: function() {},
            onExit: function() {}
          });
        }
      ]).run(['$state', function ($state) {          
          $state.transitionTo('plotter');
      }]);

    }).call(this);

我在 ui-router 文档中找到了这个示例，他们在其中制作了一些相关但我认为不同的东西。如果你看我上面的代码，你会看到我想要做什么。

Answer 1

好吧，我想我做到了（误解了多视图的概念）：

(function() {

  var score_view = {
    template: '<div>scores!</div>',
    controller: function() {
      return console.log("scores!");
    }
  };

  var plot_view = {
    template: '<div>plos!</div>',
    controller: function() {
      return console.log("plots!");
    }
  };

  this.plotter = angular.module('plotter', ['ui.state']);

  this.plotter.config([
    '$stateProvider', function($stateProvider) {
      return $stateProvider.state('plotter', {
        url: '/',
        template: '<div ui-view="step1"></div><div ui-view="step2"></div>',
        controller: function() {
          return console.log("main");
        }
      }).state('plotter.scores', {
        views: {
          'step1': score_view 
        },
        onEnter: function() {},
        onExit: function() {}
      }).state('plotter.plots', {
        views: {
          'step1': score_view, 
          'step2': plot_view 
        },
        onEnter: function() {},
        onExit: function() {}
      });
    }
  ]).run(['$state', function ($state) {          
      $state.transitionTo('plotter');
  }]);

}).call(this);