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

本文介绍了UI-Router多个命名视图不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I try to use the multiple named view of UI-Router but it's not working.

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

See following example to understand my problem :

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视图中注入任何东西.但是，如果我的用户界面视图没有名称，而我的id视图是''而不是'navigation@start'，则可以正常工作:显示 navigation.html .

ProblemNothing is display. Nothing is injected in ui-view..But if my ui-view hasn't name and my id view is '' instead of 'navigation@start' it's work : navigation.html is display..

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

I try with '@start' and without. I can't explain what is the problem. My js console is clear.

可以帮我吗?

推荐答案

有正在工作的插棒

我们在这里需要的是在index.html中创建'start'状态的未命名 视图占位符ui-view="":

What we need here, is to create 'start' state's unnamed view placeholder ui-view="", inside of the index.html:

<body ng-app="startApp">

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

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

And the start's view will now not contain the 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>

就是这样..没有其他更改.没有根(开始)有目标，子(为什么)将被正确注入

That is it.. no other change. No root (start) has a target, and child (why) will be properly injected

在在此处操作

还要检查:

这篇关于UI-Router多个命名视图不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！