javascript - $state 的 subview 未在命名的 ui-view 中呈现

Question

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

预计

登录 后 dashboard state 呈现 dashboard.html，所有组件和 ui-views 都应呈现:tickers、tags、social(名为 ui-view)和 < strong>feed.

结果

登录 后 dashboard state 呈现 dashboard.html，但只有组件 tickers、tags 和 feed 显示，但不显示 social (命名用户界面 View )

我觉得我的问题出在我从 login 过渡的某个地方状态为 dashboard状态。一旦您进入仪表板状态，它就会提供默认模板，即组件元素标签:<dash-module></dash-module> .这将呈现 dash.component 模板:dashboard.html 和 Controller 。但是，我无法访问仪表板状态对象中的社交 View 。

---

dashboard.html

<div class="jumbotron text-center">
    <h1>The Dashboard</h1>
</div>

<div class="row">
  <tickers-module></tickers-module>
  <tags-module></tags-module>

  // Expecting the social-module-template.html to show below:
  <div ui-view="social"></div> 

  <feed-module></feed-module>
</div>

带有仪表板组件的 routerApp 模块 Plnkr 中的完整代码

// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var routerApp = angular.module('routerApp', ['ui.router', 'tickers', 'tags', 'feed']);

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

    const dashboard = {
      name: 'dashboard',
      url: '/dashboard',
      params: {
        ticker: {},
        tags: {}
      },
      template: '<dash-module></dash-module>',
      views: {
        '' : {
          templateUrl: 'dashboard.html',
        },
        'social' : {
          templateUrl: 'social-module-template.html', 
          controller: function($state) {
            console.log('Social init', $state.params);
          }
        }
      }
    }

    $stateProvider
      .state(login)
      .state(dashboard);
})
tags.component('dashModule', {
  templateUrl: 'dashboard.html',
  controller: function($scope, $state) {
    console.log('dashModule loaded!');
  }
})

---

这是应该在 <div ui-view="social"></div> 中呈现社交 html 内容的部分

views: {
  '' : {
    templateUrl: 'dashboard.html',
  },
  'social' : {
    templateUrl: 'social-module-template.html', 
    controller: function($state) {
      console.log('Social init', $state.params);
    }
  }
}

Answer 1

我对你的 plunker 进行了更改 here你在这里错过了@。

const dashboard = {
  name: 'dashboard',
  url: '/dashboard',
  params: {
    ticker: {},
    tags: {}
  },
  template: '<dash-module></dash-module>',
  views: {
    '' : {
      templateUrl: 'dashboard.html',
    },
    'social@dashboard' : {
      templateUrl: 'social-module-template.html', 
      controller: function($state) {
        console.log('Social init', $state.params);
      }
    }
  }
}

In order for these components to appear under the home state, we must define them using absolute naming. Specifically, we must use the @ syntax to tell AngularJS that these components of our application should be mapped to a specific state. This follows the viewName@stateName syntax and tells our application to utilize named views from an absolute, or specific state. You can read more about relative vs. absolute names here.

参见 this获取更多信息。