Question

我对Angular UI-Router及其ui-views有疑问。我在另一个中声明了三个ui-views，唯一出现的是一个名为“languages”的视图。我不明白为什么会发生这种情况，如果有人能提供帮助那就太棒了。

的index.html：

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

routes.js：

angular.module('TMHM')
.config(routeConfig);

routeConfig.$inject = ['$stateProvider', '$urlRouterProvider'];

function routeConfig ($stateProvider, $urlRouterProvider) {

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

  $urlRouterProvider.otherwise('/');
};

这是Plunker代码，虽然我无法解决这个问题： https://plnkr.co/edit/z8cFGHKVQNN623QbBUqi

Answer 1

有更新且有效的plunker https://plnkr.co/edit/vKOr2yLUfaAfwoGyK0ws?p=preview

我使用此内容

创建了新的 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>

并将index.html更改为包含

<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'
    }
  }
});

此外，必要的是将 ng-app 从<head>移至<html>元素

<html ng-app="TMHM">

  <head >

检查here

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

Answer 2

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

如果有这个想法，我已经做了一些非常类似的事情，但是我使用了ng-include（我目前在一个为很多用户提供服务的应用程序中使用它）：

<div ng-include="mycontroller.pathToFileIWantToShow"></div>
// alternatively, although hardcoding can be evil...
<div ng-include="path/to/some/file.html"></div>

这允许我动态更改内容，使用绑定等等，每个包含的模板可以引用自己的控制器，或者只使用包装它的控制器。看起来我埋没的数量并不重要。

ui-view里面另一个没有显示

2 个答案: