Question

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

预期

登录选择Ticker后，应在名为Tags scope的橙色区域中的Ticker列表右侧显示Tags列表。

应用应如何显示

结果

选择Ticker将激活Tags状态，但Tags模板将替换顶级索引ui-view。而不是在代码模板中的<div ui-view="tags@tickers"></div>内部呈现标签模板。

该应用的外观如何

建筑

登录后，您将被发送到container州，该州有2次观看：dashboard和feed。

我觉得我的问题是我没有激活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组件

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>

Answer 1

https://plnkr.co/edit/CFbkPAlL2kVMSM3G4q5T?p=preview

通过正确使用子状态来实现它！

需要命名状态，让应用知道父母是什么：

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

然后在导航状态时，命名约定有助于特异性

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

Answer 2

根据您提供的代码，我会说ui-router正在做它应该做的事情。您已定义tags状态，因此它将填充未命名的ui-view，并且确实如此。当您点击tickers组件中的其中一个按钮时，它基本上会加载tags状态而不是container状态。

根据您提供的代码，您混合了加载特定状态时应显示的状态和视图。您正在尝试在tags占位符中加载<div ui-view='tags'></div> 州，该占位符代表tags 视图的占位符，这是一个查看，了解您要加载的特定状态。这不是ui-router应该如何工作的。

以下是您修改过的代码的example。您可以在此处看到我已在您的dashboard状态中加载feed，tickers，tags和container次观看。虽然它们中的一些是在单独的模板中，但它们都在相同的状态下加载。

由于您已经有一个示例，如何使用login和container状态加载不同的状态，这里是您修改过的代码的example，其中包含子状态。当您单击“转到私有状态”按钮时，它会加载container.private状态，这是一个container状态的子状态。如您所见，container.private状态与container状态的结构几乎相同。单击该按钮时，它将在相应的占位符中加载为container.private状态定义的视图。

我没有删除所有不必要的代码，只修改了我需要的内容。对不起。

从我所看到的，您将不得不修改您的架构，只使用组件并使用任何服务，某种类型的pub子库或尝试使用$scope.$emit和$scope.$on在组件之间进行通信如果你的控制者之间有亲子关系。

导航到状态用状态的组件替换索引ui-view，而不是在父模板中命名为ui-view

预期

结果

建筑

2 个答案:

完整代码