$ state的子视图未在命名的ui-view中呈现

问题描述

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

后，dashboard状态将呈现dashboard.html，并且所有组件和用户界面视图均应呈现: tickers ，标签， 社交(名为ui-view)和 Feed .

After the dashboard state renders dashboard.html, and all components and ui-views should render: tickers, tags, social(named ui-view) and feed.

后，dashboard状态呈现dashboard.html，但是只有组件 tickers ，标签和 feed >显示，但不显示社交(名为ui-view)

After the dashboard state renders dashboard.html however only the components tickers,tags and feed show up, but not the social (named-ui-view)

我觉得我的问题出在我从login状态过渡到dashboard状态的某个地方.达到仪表板状态后，它将提供默认模板，即组件元素标签:<dash-module></dash-module>.然后，将呈现dash.component模板:dashboard.html和controller.但是，我无法访问仪表板状态对象中的社交视图.

I feel that my problem lies somewhere around where I transition from the login state to the dashboard state. Once you hit the dashboard state, it serves up the default template which is the component element tag: <dash-module></dash-module>. This will then render the dash.component template: dashboard.html and controller. However I've lost access to the social view in the dashboard state object.

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>

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

推荐答案

我对您的监听器进行了更改这里您在这里@失踪了.

I made changes to your plunker here You were missing @ 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);
      }
    }
  }
}

有关更多信息，请参见此信息.

See this for more information.

这篇关于$ state的子视图未在命名的ui-view中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！