javascript - 为什么这里的仪表板状态没有被 $state.go ('dashboard' ... 命中？

Question

https://plnkr.co/edit/2h6fV5yTjeUqLP3SvbvO?p=preview

预期

登录后应用程序重定向到 $state container，其中包含 dashboard 和 feed。然后选择一个股票代码应该使用股票代码对象更新dashboard状态。因此，tags.component 应该使用代码 $state 对象重新初始化。

结果

登录后应用程序重定向到 $state container，其中包含 dashboard 和 feed。选择股票代码不会改变 $state。

$scope.clickTicker = function(ticker) {
    console.log('ticker', ticker)
    $state.go('dashboard', { ticker: ticker }); // <--
}

container.html(登录后)

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <section>
        <dashboard-module></dashboard-module> // <-- dashboard component & state
      </section>
    </div>

    <div class="col-sm-4">
      <section>
        <feed-module></feed-module>
      </section>
    </div>
  </div>
</div>

具有登录和仪表板状态配置的 routerApp 以及 routerApp.component

var routerApp = angular.module('routerApp', ['ui.router', 'container', 'feed', 'tickers', 'tags', 'social', 'view']);

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

  $urlRouterProvider.otherwise('/login');

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

  const dashboard = {
    parent: 'container',
    name: 'dashboard',
    url: '/dashboard',
    params: {
      ticker: {},
      tag: {}
    },
    template: '<dash-module></dash-module>',
    controller: function($scope, $state) {
      console.log('Dashboard template state', $state.params);
    },
    views: {
      '' : {
        templateUrl: 'dashboard.html',
      },
      controller: function($scope, $state) {
        console.log('Dashboard view state', $state.params);
      }
    }
  }

  $stateProvider
    .state(login)
    .state(dashboard);
})
container.component('dashboardModule', {
  templateUrl: 'dashboard.html',
  constrollerAs: 'dash',
  bindings: {
    ticker: '<',
  },
  controller: function($scope, $state, $stateParams) {
    console.log('Dashboard component state.params', $state.params);
    console.log('Dashboard component stateParams', $stateParams)
  }
})

dashboard.html

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <section>
        <div class="jumbotron text-center salmon">
           <h3>The Dashboard Stuff</h3>
        </div>

        <div class="container">
          <div class="row">
            <div class="col-sm-8 pad0">
              <view-module></view-module>
            </div>
          </div>
        </div>

        <div class="container">
          <div class="row">
            <div class="col-sm-2">
              <tickers-module ticker="dash.ticker"></tickers-module>
            </div>
            <div class="col-sm-2 ml10">
              <tags-module></tags-module>
            </div>
            <div class="col-sm-2">
              <social-module></social-module>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Answer 1

使用

$state.go('dashboard', { ticker: ticker }, {reload: true});

这应该有帮助