使用额外视图扩展父状态

Question

使用：AngularJS和UI-路由器。

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

代码如下所示（在文件 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])
    ;

结果是只显示 menu 视图。 main 视图不显示，除非我也将其添加到 root 状态。任何人都知道什么是错的？

编辑

包含视图的HTML：

<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>

编辑 2

这里有一个类似的问题：UI-Router inheriting views，但这对我不起作用...

编辑 3

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

Answer 1

您的整个代码是正确的，只是您需要通过执行 ui-sref="root.main" 或 ui-sref=".main"

从 UI 调用该路由

标记

<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>

Answer 2

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

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

使用额外视图扩展父状态

Extending parent state with extra views

angularjs

angular-ui-router