具有累积状态的Angularjs ui路由器

我试图创建一个接口，在退出该状态后，每个状态的视图都保留在DOM上，我用下面的代码进行的实验在逻辑上是正确的，每次我转换到另一个状态时，Previous状态的视图都会从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);

（函数（）{
this.plotter=angular.module（'plotter'，['ui.state']）；
此文件为.plotter.config([
“$stateProvider”，函数（$stateProvider）{
返回$stateProvider.state（'绘图仪'{
url:“/”，
模板：“”，
控制器：函数（）{
返回console.log（“main”）；
}
}).state（'plotter.scores'{
观点：{
“scoresview”：{
模板：“分数！”，
控制器：函数（）{
返回console.log（“分数！”）；
}
}
},
onEnter:function（）{}，
onExit:function（）{}
}).state（'plotter.plots'{
观点：{
“plotsview”：{
模板：“plos！”，
控制器：函数（）{
返回console.log（“plots！”）；
}
}
},
onEnter:function（）{}，
onExit:function（）{}
});
}
]).run（['$state'，函数（$state）{
$state.transitiono（'plotter'）；
}]);
}).打电话（这个）；

我在ui路由器文档上找到了一个例子，他们正在制作一些相关但我认为不同的东西。如果你看我上面的代码，你会看到我在做什么。

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

（函数（）{
var分数\u视图={
模板：“分数！”，
控制器：函数（）{
返回console.log（“分数！”）；
}
};
变量绘图视图={
模板：“plos！”，
控制器：函数（）{
返回console.log（“plots！”）；
}
};
this.plotter=angular.module（'plotter'，['ui.state']）；
此文件为.plotter.config([
“$stateProvider”，函数（$stateProvider）{
返回$stateProvider.state（'绘图仪'{
url:“/”，
模板：“”，
控制器：函数（）{
返回console.log（“main”）；
}
}).state（'plotter.scores'{
观点：{
“步骤1”：分数视图
},
onEnter:function（）{}，
onExit:function（）{}
}).state（'plotter.plots'{
观点：{
“步骤1”：分数视图，
“步骤2”：绘图视图
},
onEnter:function（）{}，
onExit:function（）{}
});
}
]).run（['$state'，函数（$state）{
$state.transitiono（'plotter'）；
}]);
}).打电话（这个）；

(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);