使用额外的视图扩展父状态 [英] Extending parent state with extra views

问题描述

使用:AngularJS 和 UI-Router.

我正在尝试创建一个具有两个视图的页面:menu 和 main.一个用于菜单，另一个用于可能存在的任何内容.但是，我不想每次都在所有状态下定义两个视图.menu 视图不会经常更改.所以我创建了一个父根"状态，它只包含 menu 视图.然后其他状态从中派生并添加适当的视图.

代码如下(在文件 app.js 中):

角度.module('管理员', ["ui.router"]).config(["$stateProvider", function($stateProvider) {$stateProvider.state('root', {摘要:真实，意见:{菜单": {templateUrl: "../static/partials/menu.html",控制器:菜单控制器"}}}).state('root.main', {网址:"",父母:'根'，意见:{主要的": {templateUrl: "../static/partials/landing.html",控制器:主控制器"}}}).state('root.login', {网址:/登录"，父母:'根'，意见:{主要的": {templateUrl: "../static/partials/login.html",控制器:登录控制器"}}});}]).controller('MainController', ["$scope", "$http", mainController]).controller('MenuController', ["$scope", "$http", menuController]).controller('LoginController', ["$scope", "$http", loginController]);

结果是只显示menu 视图.main 视图不会显示，除非我也将它添加到 root 状态.有谁知道出了什么问题?

编辑

包含视图的 HTML:

<a ui-sref="root.main">点击我</a><div class="ui menu" ui-view="menu"></div><div class="ui 段"><div ui-view="main"></div>
<br>

<script src="{{ url_for('static', filename='js/menu.js') }}"></script><script src="{{ url_for('static', filename='js/main_controllers.js') }}"></script><script src="{{ url_for('static', filename='js/app.js') }}"></script>

编辑 2

这里有一个类似的问题:UI-Router 继承视图，但这并没有为我工作...

编辑 3

我设法在 plnkr 中非常简单地重现了这个:http://plnkr.co/edit/uYlFgsvq8hQHON8EESEx?p=preview

解决方案

刚刚遇到了同样的问题，并使用您的 plnkr 找到了解决方案.您需要将@"添加到视图名称中，如下所示.

.state('root.main', {网址:"",父母:'根'，意见:{主要的@": {templateUrl: "../static/partials/landing.html",控制器:主控制器"}}})

Using: AngularJS and UI-Router.

I am trying to create a page that has two views: menu and main. One is for a menu and the other is for whatever content there may be. However, I do not want to define both views in all states every time. The menu view will not change too often. So I created a parent 'root' state which contains only the menu view. The other states then derive from this and add appropriate views.

The code looks like this (in a file app.js):

angular
    .module('Admin', ["ui.router"])
    .config(["$stateProvider", function($stateProvider) {
        $stateProvider.state('root', {
            abstract: true,
            views: {
                "menu": {
                    templateUrl: "../static/partials/menu.html",
                    controller: "MenuController"
                }
            }
        }).state('root.main', {
            url: "",
            parent: 'root',
            views: {
                "main": {
                    templateUrl: "../static/partials/landing.html",
                    controller: "MainController"
                }
            }
        }).state('root.login', {
            url: "/login",
            parent: 'root',
            views: {
                "main": {
                    templateUrl: "../static/partials/login.html",
                    controller: "LoginController"
                }
            }
        })
        ;
    }])
    .controller('MainController', ["$scope", "$http", mainController])
    .controller('MenuController', ["$scope", "$http", menuController])
    .controller('LoginController', ["$scope", "$http", loginController])
    ;

The result is that only the menu view is displayed. The main view is not displayed, unless I also add it to the root state. Anyone know what is wrong?

EDIT

The HTML that contains the views:

<div ng-app="Admin">
    <a ui-sref="root.main">Click me</a>
    <div class="ui menu" ui-view="menu"></div>
    <div class="ui segment">
        <div ui-view="main"></div>
    </div>
    <br>
</div>

<script src="{{ url_for('static', filename='js/menu.js') }}"></script>
<script src="{{ url_for('static', filename='js/main_controllers.js') }}"></script>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>

EDIT 2

There is a similar question here: UI-Router inheriting views, but this does not work for me...

EDIT 3

I managed to very simply reproduce this in plnkr: http://plnkr.co/edit/uYlFgsvq8hQHON8EESEx?p=preview

解决方案

Just had the same problem and found the solution using your plnkr. You need to add the '@' to the view name as shown below.

.state('root.main', {
    url: "",
    parent: 'root',
    views: {
        "main@": {
            templateUrl: "../static/partials/landing.html",
            controller: "MainController"
        }
    }
})

这篇关于使用额外的视图扩展父状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！