0

私は、すべての状態が、その状態を終了した後、そのビューが DOM に残るインターフェイスを作成しようとしています。以下のコードで実験していることは論理的に正しいです。別の状態に遷移するたびに、前の状態のビュー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 docs で見つけました。そこでは、関連しているが異なるものを作成していると思います。上記のコードを見ると、私が何をしようとしているのかがわかります。

4

1 に答える 1

0

まあ、私はそれを作ったと思います（複数のビューの概念を誤解しています）：

(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);
于 2013-06-12T16:34:15.097 に答える