UI-Router 多个命名视图不起作用答案

【问题标题】：UI-Router multiple named views not workingUI-Router 多个命名视图不起作用
【发布时间】：2016-03-01 15:05:10
【问题描述】：

我尝试使用 UI-Router 的多个命名视图，但它不起作用。

请参阅以下示例以了解我的问题：

start.html

<body ng-app="startApp">
    <div ui-view="navigation"></div>
    <div ui-view="content"></div>
</body>

nav.html

<nav>
    <ul>
        <li>btn1</li>
        <li>btn2</li>
    </ul>
</nav>

content.html

<h1>My content</h1>

app.js

angular.module('startApp', ['ngAnimate', 'ui.router', 'ngFileUpload', 'ngImgCrop'])

.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('start', {
        url: '/start',
        templateUrl: 'pages/start/start.html',
        controller: 'mainController'
    })

        .state('start.Why', {
        url: '/Why',
        views: {
            'navigation@start': {
                templateUrl: 'pages/start/nav.html'
            },
            'content@start': {
                templateUrl: 'pages/start/content.html'
            }
        }
    })
})

问题没有什么是显示。 ui-view 中没有注入任何内容。但是，如果我的 ui-view 没有名称并且我的 id 视图是 '' 而不是 'navigation@start' 它的工作：navigation.html 是显示..

我尝试使用 '@start' 和不使用。我无法解释是什么问题。我的 js 控制台很清晰。

你能帮帮我吗？

【问题讨论】：

可能会帮助你stackoverflow.com/questions/22175980/…
你试过navigation@start.why吗？
我已经尝试过了，它不起作用
是start 状态摘要吗？
我已经尝试将start 状态抽象化，并将/start/Why 中的start.why url 更改为startstate url 在'' 中

标签： angularjs angular-ui-router angular-ui multiple-views

【解决方案1】：

有a working plunker

这里我们需要的是，在 index.html 中创建 'start' 状态的 unnamed view 占位符ui-view=""：

<body ng-app="startApp">

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

现在开始的视图将不包含 ng-app

<!--<body ng-app="startApp">-->
<div>
  <h1>This is a start state view</h1>

  <div>place for child state views</div>
  <hr />
    <div ui-view="navigation"></div>
    <div ui-view="content"></div>
<!--</body>-->
</div>

就是这样..没有其他变化。没有root（start）有target，child（why）会被正确注入

在action here观察当前的解决方案

同时检查：

Angular UI Router - Nested States with multiple layouts

【讨论】：

是的！它正在工作！但是现在，在我与start.Why 不同的状态下，我的控制器永远不会被调用。例如，我有一个ng-click="start()" 按钮，在使用嵌套视图之前，它可以工作，但现在情况并非如此......我想念的?
那是问题父子..如果你的下一个状态例如start.Second 从 start.Why... 父级保持原样 - 没有.. 重新触发。你可以做的是为孩子创建特殊的控制器......我为你创建了例子plnkr.co/edit/iZywAbe4DT5Fg0P5a7kW?p=preview
如果有帮助就太好了 ;) 享受令人惊叹的 UI-Router，先生

【解决方案2】：

作为我为你添加的链接。试试这个

  $stateProvider
    .state('start', {
    url: '/start',
    templateUrl: 'pages/start/start.html',
    controller: 'mainController'
})

    .state('start.Why', {
    url: '/Why',
    views: {
        'navigation@start.Why': {
            templateUrl: 'pages/start/nav.html'
        },
        'content@start.Why': {
            templateUrl: 'pages/start/content.html'
        }
    }
})

【讨论】：