javascript - 状態に移動すると、親のテンプレート内の名前付きの ui-view ではなく、インデックスの ui-view が状態のコンポーネントに置き換えられます

Question

Plnkr: https://plnkr.co/edit/TrjrZ4vQlOjxyjc1mKQt?p=preview

期待される

ティッカーをLogin選択すると、ティッカー リストの右側のタグ スコープと呼ばれるオレンジ色の領域にタグ リストが表示されます。

アプリの外観

---

結果

ティッカーを選択すると、タグの状態がアクティブになりますが、タグ テンプレートは最上位のインデックス UI ビューを置き換えます。ティッカー テンプレート内のタグ テンプレートをレンダリングする代わりに<div ui-view="tags@tickers"></div>。

アプリの外観

建築

ログイン後、 と の 2 つのビューがある状態containerに移動します。dashboardfeed

私の問題は、現在のdashboard stateアーキテクチャtickers stateでどうすればそれを行うことができますか?

---

// Container module
////////////////////////////////////////////////////////////////////////////////
var container = angular.module('container', [ 'ui.router' ])
  container.config(function($stateProvider) {
    const container = {
      name: 'container',
      url: '/container',
      views: {
        '': {
          templateUrl: 'container-template.html',
          controller: function($scope) {
            console.log('CONTAINER view $state');
          }
        },
        'dashboard@container': {
          templateUrl: 'dashboard-template.html',
          controller: function($scope, $state) {
            console.log('DASHBOARD view $state', $state);
          }
        },
        'feed@container': {
          templateUrl: 'feed-template.html',
          controller: function($scope) {
            console.log('FEED view $state');
          }
        }
      }
    }
    
    $stateProvider.state(container);
  });

ダッシュボード テンプレート

<div class="dashboard-state">
  <div class="fl w100">
    <em>Dashbaord scope</em>  
  </div>
  
  <!--<div ui-view="tickers"></div>-->
  <tickers-module></tickers-module>
</div>

ティッカー コンポーネント

tickers.component('tickersModule', {
  templateUrl: 'tickers-template.html',
  controller: function($scope, $state) {
    console.log('TICKERS component');
    $scope.tickers = [
      { id: 1, ticker: 'AAPL' },
      { id: 2, ticker: 'GOOG' },
      { id: 3, ticker: 'TWTR' }
    ];
    
    $scope.clickTicker = function(ticker) {
      console.log(' Ticker clicked!', $state)
      $state.go('tags', { ticker: ticker }); // <~~~~ Action to go to Tags
    }
  }
});

ティッカー テンプレート

<div class="tickers-state">
  <div class="fl w100">
    <em>Tickers scope</em>    
  </div>

  <div class="tickers-panel">
    <div class="tickers-list">
      <ul>
        <li ng-repeat="ticker in tickers" class="fl">
          <button ng-click="clickTicker(ticker)">{{ ticker.ticker }}</button>
        </li>
      </ul>      
    </div>
  </div>
  
  <div ui-view="tags@tickers"></div>
  <!--<tags-module></tags-module>-->
  
</div>