Javascript AngularJS UI路由器如何将状态视图加载到顶级状态的另一个嵌套视图中？

我有一个名为

container

的顶级状态，其中包含命名视图

仪表板
和
提要

在
仪表板
视图模板中，我有一个
在那里，我想加载
股票行情
状态，我该怎么做？

这是通过在命名视图中添加内容来实现的吗
dashboard@container


容器模块
容器模板
主tickersApp模块
我认为您应该在容器上使用以下不同的状态：

$stateProvider
.state（“容器”{
url:“/container”，
templateUrl:“”
})

使用ui sref仍在等待更多答案，但到目前为止，我通过在
仪表板模板.html中使用
tickers.component
实现了这一点


我希望避免使用
ui sref
并在所有控制器中使用
$state.go
。好的，如果我继续上面的内容，我的问题仍然是，如何在仪表板状态中实现tickers状态？你能用叉子叉一下吗？
// 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) {
            console.log('DASHBOARD view $state');
          }
        },
        'feed@container': {
          templateUrl: 'feed-template.html',
          controller: function($scope) {
            console.log('FEED view $state');
          }
        }
      }
    }

    $stateProvider.state(container);
  });

<div>
  <div class="fl w100">
    <em>Container state</em>  
  </div>

  <div ui-view="dashboard" class="fl"></div>
  <div ui-view="feed" class="fl"></div>
</div>

<div class="dashboard-state">
  <em>Dashbaord state</em>
  <div ui-view="tickers"></div>
</div>

// Tickers module
var tickers = angular.module('tickers', ['ui.router'])

tickers.config(function($stateProvider) {

  const tickers = {
    parent: 'dashboard',
    name: 'tickers',
    url: '/tickers',
    params: {
      ticker: {}
    },
    views: {
      '': {
        templateUrl: 'tickers-template.html',
        controller: function($scope, $state) {
          console.log('TICKERS view $state');

          $scope.tickers = [
            { id: 1, ticker: 'AAPL' },
            { id: 2, ticker: 'GOOG' },
            { id: 3, ticker: 'TWTR' }
          ];

          $scope.clickTicker = function(ticker) {
            console.log('ticker', ticker)
            $state.go('tags', { ticker: ticker });
          }
        }
      },
      'tags@tickers': {
        templateUrl: 'tags-template.html',
        controller: function($scope) {
          console.log('TAGS view $state');
        }
      }
    }
  }

  $stateProvider.state(tickers);
})

// TickersApp module
////////////////////////////////////////////////////////////////////////////////
var tickersApp = angular.module('tickersApp', ['ui.router', 'container', 'tickers']);

tickersApp.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/login');

  const login = {
    name: 'login',
    url: '/login',
    templateUrl: 'login-template.html',
    bindToController: true,
    controllerAs: 'l',
    controller: function($state) {
      this.login = function() {
        $state.go('container', { });
      }
    }
  }

  $stateProvider
    .state(login);
});

    .state('container.feed', {
        url: '/container/feed',
        templateUrl: 'partial-home.html'
    })

    .state('container.dashboard', {
        url: '/container,
        templateUrl: 'partial-home.html'
    })

<div class="dashboard-state">
  <div class="fl w100">
    <em>Dashbaord state</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 });
    }
  }
});