Javascript 导航到状态将索引ui视图替换为状态'；s组件，而不是父级'；s模板

Plnkr:

预期 登录后，选择一个Ticker应该在Ticker列表右侧的橙色区域显示标签列表，该区域称为Tags scope

应用程序应该是什么样子的

---

后果 选择一个标记器将激活标记状态，但是标记模板将替换顶级索引ui视图。而不是在Tickers模板中的

中呈现标记模板

<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>

应用程序的外观

建筑学 登录后，您将被发送到

容器

状态，该状态有两个视图：

仪表板

和

提要

我觉得我的问题是我没有激活

仪表板状态

，也没有激活

股票行情状态

，如果是这样，在我当前的体系结构中如何做到这一点

---

仪表板模板

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

Dashbaord范围

股票代码组件

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

tickers.component（'tickersModule'{
templateUrl:'tickers template.html'，
控制器：函数（$scope，$state）{
console.log（“TICKERS组件”）；
$scope.tickers=[
{id:1，股票代码：'AAPL'}，
{id:2，股票代码：'GOOG'}，
{id:3，股票代码：'TWTR'}
];
$scope.clickTicker=功能（ticker）{
console.log（'Ticker clicked！'，$state）
$state.go（'tags'，{ticker:ticker}）；//
根据您提供的代码，我想说，
ui路由器
正在做它应该做的事情。您定义了
标记
状态，因此它将填充未命名的
ui视图
，它确实如此。当您单击
tickers
组件中的一个按钮时，它基本上加载了
标记
状态，而不是t他
容器
状态

根据您提供的代码，您混淆了加载特定状态时应显示的状态和视图。您试图在一个
占位符中加载一个
标记
状态，该占位符表示
标记
视图的占位符，该视图是一个视图c状态您要加载。这不是
ui路由器
的工作方式

这是您修改过的代码的一部分。您可以在这里看到，我已在您的
容器
状态中加载了
仪表板
、
提要
、
股票
和
标签
视图。尽管其中一些在单独的模板中，但它们都是在相同的状态下加载的

由于您已经有了一个示例，说明了如何使用
login
和
container
状态加载不同的状态，因此这里有一个带有子状态的已修改代码的示例。当您单击“转到私有状态”时按钮，它加载
container.private
状态，这是
container
状态的子状态。如您所见，
container.private
状态的结构几乎与
container
状态相同。单击按钮时，它将加载为
container.private
状态定义的视图正在删除占位符

我没有删除所有不必要的代码，只是修改了我需要的。对此我很抱歉

据我所见，如果您的控制器之间存在父子关系，您必须修改您的体系结构，以便只使用组件并在组件之间通过服务、某种发布子库进行通信，或者尝试使用
$scope.$emit
和
$scope.$on
。

通过正确使用子状态使其正常工作

需要这样命名状态，以便让应用程序知道父项是什么：

const dashboard = {
    name: 'container.dashboard',
    views: {
        'dashboard': {
            template: '<dashboard-module></dashboard-module>'
        },
        'feed': {
          templateUrl: 'feed-template.html',
          controller: function($scope) {
            console.log('FEED STATE');
          }
        }
    }
}

以及命名视图的正确使用：

const tags = {
  name: 'container.dashboard.tickers.tagslist',
  url: '/tags',
  params: {
    ticker: {}
  },
  views: {
    'tags' : {

完整代码
//容器模块
////////////////////////////////////////////////////////////////////////////////
var container=angular.module（'container'，['ui.router']））
container.config（函数（$stateProvider）{
常量容器={
名称：'容器'，
url:“/container”，
templateUrl:“container template.html”，
控制器：函数（$scope，$state）{
log（“容器状态”）；
//$state.go（'dashboard'，{}）；
}
}
常量仪表板={
名称：“container.dashboard”，
//对,，
//斯蒂奇：是的，
观点：{
“仪表板”：{
模板：“”
},
“提要”：{
templateUrl:'feed template.html'，
控制器：功能（$scope）{
console.log（'FEED STATE'）；
}
}
}
}
$stateProvider
.州（集装箱）
.国家（仪表板）；
});
//仪表板模块
////////////////////////////////////////////////////////////////////////////////
var dashboard=angular.module（'dashboard'，['ui.router']））
dashboard.config（函数（$stateProvider）{
常量破折号\u默认值={
名称：“container.dashboard.default”，
url:“/dashboard”，
模板：“”，
控制器：函数（）{
console.log（'DASHBOARD.DEFAULT STATE'）
}
}
$stateProvider.state（默认为破折号）；
})
dashboard.component（'dashboardModule'{
templateUrl:“dashboard template.html”，
控制器：函数（$scope，$state）{
log（“仪表板组件”）；
}
});
//股票模块
////////////////////////////////////////////////////////////////////////////////
var tickers=angular.module（'tickers'，['ui.router']））
tickers.config（函数（$stateProvider）{
常量代码={
//父项：“仪表板”，
名称：“container.dashboard.tickers”，
url:“/tickers”，
参数：{
股票代码：{}
},
观点：{
'': {
templateUrl:'tickers template.html'，
控制器：函数（$scope，$state）{
console.log（'TICKERS STATE'，$sta
$scope.clickTicker = function(ticker) {
  console.log(' >>> ticker view state', ticker)
  $state.go('container.dashboard.tickers.tagslist', { ticker: ticker });
}

const tags = {
  name: 'container.dashboard.tickers.tagslist',
  url: '/tags',
  params: {
    ticker: {}
  },
  views: {
    'tags' : {

// Container module
////////////////////////////////////////////////////////////////////////////////
var container = angular.module('container', [ 'ui.router' ])
  container.config(function($stateProvider) {

    const container = {
      name: 'container',
      url: '/container',
      templateUrl: 'container-template.html',
      controller: function($scope, $state) {
        console.log('CONTAINER STATE');
        // $state.go('dashboard', {});
      }
    }

    const dashboard = {
        name: 'container.dashboard',
        // deepStateRedirect: true,
        // sticky: true,
        views: {
            'dashboard': {
                template: '<dashboard-module></dashboard-module>'
            },
            'feed': {
              templateUrl: 'feed-template.html',
              controller: function($scope) {
                console.log('FEED STATE');
              }
            }
        }
    }

    $stateProvider
      .state(container)
      .state(dashboard);
  });

// Dashboard module
////////////////////////////////////////////////////////////////////////////////
var dashboard = angular.module('dashboard', [ 'ui.router' ])

    dashboard.config(function($stateProvider) {
      const dash_default = {
        name: 'container.dashboard.default',
        url: '/dashboard',
        template: '<tickers-module></tickers-module>',
        controller: function() {
          console.log(' DASHBOARD.DEFAULT STATE')
        }
      }
      $stateProvider.state(dash_default);
    })

    dashboard.component('dashboardModule', {
    templateUrl: 'dashboard-template.html',
    controller: function($scope, $state) {
      console.log('DASHBOARD component');
    }
  });

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

  tickers.config(function($stateProvider) {

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

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

            // $state.go('tags', { ticker: $scope.tickers[0] });

            $scope.clickTicker = function(ticker) {
              console.log(' >>> ticker view state', ticker)
              $state.go('container.dashboard.tickers.tagslist', { ticker: ticker });
            }
          }
        }
      }
    }

    $stateProvider.state(tickers);
  })
  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.list', { ticker: ticker });
      // }
    }
  });

// Tags module
////////////////////////////////////////////////////////////////////////////////
var tags = angular.module('tags', ['ui.router'])
  tags.config(function($stateProvider) {

    const oldtags = {
      name: 'tags',
      url: '/tags',
      params: {
        ticker: {},
        tag: {}
      },
      // parent: 'tickers',
      views: {
        '': {
          templateUrl: 'tags-template.html',
          controller: function($scope, $state) {
            console.log('Tags view $state', $state.params);
            const tags_model = [
              {
                ticker: 'AAPL',
                tags : [{ id: 1, term: 'iPhone 7' }, { id: 2, term: 'iPhone 8' }, { id: 3, term: 'Tim Cook' }]
              },
              {
                ticker: 'GOOG',
                tags : [{ id: 4, term: 'Pixel' }, { id: 5, term: 'Pixel XL' }, { id: 6, term: 'Chrome Book' }]
              },
              {
                ticker: 'TWTR',
                tags : [{ id: 7, term: 'tweet' }, { id: 8, term: 'retweet' }, { id: 9, term: 'moments' }]
              }
            ];

            function matchTags(ticker, model) {
              return model.filter(function(obj){
                if (obj.ticker === ticker) { return obj; }
              });
            }

            $scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];

            console.log(' $scope.tags_model', $scope.tags_model)

            $scope.clickTag = function(tag) {
              $state.go('tags', { tag: tag });
            }

            console.log('Tags init', $state.params);
          }
        },
        'list@tags': {

        },
        'view@tags': {
          template: '<view-module ticker="$ctrl.ticker"></view-module>',
          controller: function($scope, $state) {
            console.log('VIEWS view $state');
            $scope.term = $state.params.tag.term;
          }
        },
        'chart@tags': {
          templateUrl: 'chart-template.html',
          controller: function($scope, $state) {
            console.log('CHART view $state');
            $scope.term = $state.params.tag.term;
          }
        },
        'social@tags': {
          templateUrl: 'social-template.html',
          controller: function($scope, $state) {
            console.log('SOCIAL view $state');
            $scope.term = $state.params.tag.term;
          }
        }
      }
    }

    const tags = {
      name: 'container.dashboard.tickers.tagslist',
      url: '/tags',
      params: {
        ticker: {}
      },
      views: {
        'tags' : {
          templateUrl: 'tags-list.html',
          controller: function($scope, $state) {
            console.log(' tags-list controller', $state)
            $scope.ticker = $state.params.ticker;

            const tags_model = [
              {
                ticker: 'AAPL',
                tags : [{ id: 1, term: 'iPhone 7' }, { id: 2, term: 'iPhone 8' }, { id: 3, term: 'Tim Cook' }]
              },
              {
                ticker: 'GOOG',
                tags : [{ id: 4, term: 'Pixel' }, { id: 5, term: 'Pixel XL' }, { id: 6, term: 'Chrome Book' }]
              },
              {
                ticker: 'TWTR',
                tags : [{ id: 7, term: 'tweet' }, { id: 8, term: 'retweet' }, { id: 9, term: 'moments' }]
              }
            ];

            function matchTags(ticker, model) {
              return model.filter(function(obj){
                if (obj.ticker === ticker) { return obj; }
              });
            }

            $scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];

            console.log(' $scope.tags_model', $scope.tags_model)

            $scope.clickTag = function(tag) {
              $state.go('tags', { tag: tag });
            }
          }
        },
        'view@tags': {
          template: '<view-module ticker="$ctrl.ticker"></view-module>',
          controller: function($scope, $state) {
            console.log('VIEWS view $state');
            $scope.term = $state.params.tag.term;
          }
        }
      }
    }

    $stateProvider
      .state(tags);
      // .state(tagslist);
  })
  tags.component('tagsModule', {
    templateUrl: 'tags-template.html',
    controller: function($scope, $state) {
      console.log('TAGS component', $state.params);
    }
  });

// ViewHeader module
////////////////////////////////////////////////////////////////////////////////
var view = angular.module('view', ['ui.router'])
  view.component('viewModule', {
    templateUrl: 'view-template.html',
    bindings: {
      ticker: '<'
    },
    controller: function($scope, $state) {
      console.log('VIEW component', $state.params);
      $scope.ticker = this.ticker;
      $scope.term = $state.params.tag.term;
    }
  });

// Chart module
////////////////////////////////////////////////////////////////////////////////
var chart = angular.module('chart', ['ui.router'])
  chart.component('chartModule', {
    templateUrl: 'chart-template.html',
    controller: function($scope, $state) {
      console.log('CHART component', $state.params);
      $scope.term = $state.params.tag.term;
    }
  });

// Social module
////////////////////////////////////////////////////////////////////////////////
var social = angular.module('social', ['ui.router'])
  social.component('socialModule', {
    templateUrl: 'social-template.html',
    controller: function($scope, $state) {
      console.log('SOCIAL component', $state.params);
      $scope.term = $state.params.tag.term;
    }
  });

// TickersApp module
////////////////////////////////////////////////////////////////////////////////
var tickersApp = angular.module('tickersApp', 
  ['ui.router',
   'container',
   'dashboard',
   'tickers',
   'tags',
   'view',
   'chart',
   'social']);

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.dashboard.tickers', { });
      }
    }
  }

  $stateProvider
    .state(login);
})
.run(['$rootScope', '$location', '$state',
function($rootScope, $location, $state) {
    // $rootScope.$on("$stateChangeError", console.log.bind(console));
    $rootScope.$on('$stateChangeStart',
      function(event, toState, toParams, fromState, fromParams, options) {
          // console.log(' ')
          // console.log('toState', toState)
          // console.log('state.current.name', $state.current.name)
          // console.log('toParams', toParams)
          // console.log('fromState', fromState)
          // console.log('fromParams', fromParams)
          // console.log('options', options)
      });

    $rootScope.$on('$stateChangeSuccess', 
      function(event, toState, toParams, fromState, fromParams){
        console.log('state.current.name', $state.current.name)
      })

    $rootScope.$on('$stateChangeError', 
      function(event, toState, toParams, fromState, fromParams, error){
        console.error('ERROR toState', toState)
        console.error('ERROR fromState', fromState)
      });

    $rootScope.$on('$stateNotFound', 
      function(event, unfoundState, fromState, fromParams){ 
          console.log('unfoundState.to', unfoundState.to); // "lazy.state"
          // console.log('unfoundState.toParams', unfoundState.toParams); // {a:1, b:2}
          // console.log('unfoundState.options', unfoundState.options); // {inherit:false} + default options
      });

    $rootScope.$on('$viewContentLoaded', 
      function(event){
        // console.log('viewContentLoaded', event)
      });
}]);