无法使用抽象状态在 Angular UI-router 中提供初始共享视图

Question

我正在尝试使用 Angular 和 Angular UI router 通过抽象状态提供一些初始的“部分”视图，但在这个过程中的某个地方我做出了错误的解释，这破坏了我的实现.. .

如您所见，我尝试了一些变体，为抽象状态指定了一个 customLayout.html 模板。这也没有用。

的作用（但不是我想要的）是在每个状态上指定共享的部分模板。

我已经在此处实现了什么什么不：

See this: JSBin.

Look at: //REMOVE COMMENT HERE to switch between an "inherited" or "child" state.

        $stateProvider
            .state("layout", {
                abstract: true,
                url: "",
                //templateUrl: "customLayout.html",
                views: {
                    "header" :  {
                        templateUrl: 'shared/header.html',
                    }
                }
            })
            //REMOVE COMMENT HERE
            //.state("layout.demo")
            .state("demo", {
                url: "/demo",
                views: {
                    "" :  {
                        templateUrl: 'demo.html',
                    },
                    "header" :  {
                       templateUrl: 'shared/header.html'                            
                    }
                }
            });

编辑：

在的帮助下：

    $stateProvider
            .state("layout", {
                abstract: true,
                url: "",
                //templateUrl: "customLayout.html",
                views: {
                    "header" :  {
                        templateUrl: 'shared/header.html',
                    },
                    //ADDED THIS, ESSENTIALLY PROXYING THE NAMELESS TEMPLATE
                    '': {
                        template: '<ui-view />'
                    }
                }
            })

Answer 1

试试这个：

app.config([
    '$stateProvider',
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        console.log("app: states");

        $urlRouterProvider
            .otherwise('/demo');


        $stateProvider
            .state("layout", {
                abstract: true,
                url: "",
                //templateUrl: "customLayout.html",
                views: {
                    "" :  {
                        templateUrl: 'demo.html'
                    },
                    "header" :  {
                        templateUrl: 'shared/header.html'
                    }
                }
            })
            //REMOVE COMMENT HERE
            //.state("layout.demo")
            .state("layout.demo", {
                url: "/demo",
            });
    }
]);

这是工作 link： http://jsbin.com/zehejovaco/1/edit?html,output

无法使用抽象状态在 Angular UI-router 中提供初始共享视图

Unable to use abstract state to provide initial shared views in Angular UI-router

abstract

angularjs

angular-ui-router