Javascript 另一个内部的ui视图不显示_Javascript_Angularjs_Angular Ui Router_Angular Ui_State

Javascript 另一个内部的ui视图不显示

javascript angularjs

Javascript 另一个内部的ui视图不显示,javascript,angularjs,angular-ui-router,angular-ui,state,Javascript,Angularjs,Angular Ui Router,Angular Ui,State,我有一个关于Angular UI路由器及其UI视图的问题。我在另一个ui视图中声明了三个ui视图，唯一显示的是名为“languages”的ui视图。我不明白为什么会发生这种情况，如果有人能帮忙，那就太好了 index.html： <div ui-view="languages"> <div ui-view="dashboard"></div> <div ui-view="partners"></div> <div ui

我有一个关于Angular UI路由器及其UI视图的问题。我在另一个ui视图中声明了三个ui视图，唯一显示的是名为“languages”的ui视图。我不明白为什么会发生这种情况，如果有人能帮忙，那就太好了

index.html：

<div ui-view="languages">
  <div ui-view="dashboard"></div>
  <div ui-view="partners"></div>
  <div ui-view="footer"></div>
</div>

以下是Plunker代码，尽管我无法实现：

我以前从未见过这样做（路由视图中的路由视图）。这可能是因为它不起作用，或者我从来没有遇到过它，我不知道。我倾向于将视图视为顶级视图，然后将include视为嵌套内容

如果是这样的话，我做了一些非常类似的事情，但我使用了ng include（我目前在一个为很多用户服务的应用程序中使用了这个）：


//或者，虽然硬编码可能是邪恶的。。。

这允许我动态更改内容，使用绑定等，并且每个包含的模板都可以引用自己的控制器，或者只使用包装它的控制器。我窝了多少似乎并不重要

有一个已更新且正在工作的插件

我用这个内容创建了新的routes.html

<h1>Routes</h1>

<hr />
<div ui-view="languages"></div>
<div ui-view="dashboard"></div>
<div ui-view="partners"></div>
<div ui-view="footer"></div>

然后状态调整是：

.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'routes.html'
    },
    'languages@home': {
      templateUrl: 'languages.html'
    },
    'dashboard@home': {
      templateUrl: 'dashboard.html'
    },
    'partners@home': {
      templateUrl: 'partners.html'
    },
    'footer@home': {
      templateUrl: 'footer.html'
    }
  }
});

另外，重要的是将ng应用程序
从

移动到

元素

<html ng-app="TMHM">

  <head >

检查一下

有关命名视图和多视图的更多详细信息和示例：

请附上您的plunker代码。已经添加了plunker链接。为了更好地理解，请阅读这些教程。这并不完全是我想要的，但它对解决我的问题有很大帮助。非常感谢你！不管怎么说，如果那是一辆HELPED，那就太好了；）享受强大的用户界面路由器

<div ui-view=""></div>

.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'routes.html'
    },
    'languages@home': {
      templateUrl: 'languages.html'
    },
    'dashboard@home': {
      templateUrl: 'dashboard.html'
    },
    'partners@home': {
      templateUrl: 'partners.html'
    },
    'footer@home': {
      templateUrl: 'footer.html'
    }
  }
});

<html ng-app="TMHM">

  <head >