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

Question

我正试图通过使用Angular和Angular UI router的抽象状态提供一些初始的“部分”视图，但在某处我正在做出一个错误解释，这违反了我的实现... < / p>

正如您所看到的，我尝试了一些变体，为抽象状态指定了customLayout.html模板。这也行不通。

工作（但不是我想要的）是指定每个州的共享部分模板。

我已经实现 以及

  

请参阅：JSBin。

     

请注意：//REMOVE COMMENT HERE在“继承”或“子”状态之间切换。

        $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'                            
                    }
                }
            });

编辑：

借助this：

    $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",
            });
    }
]);

以下是工作链接： http://jsbin.com/zehejovaco/1/edit?html,output