Question

我有这段代码：

angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
    $stateProvider
    .state("member", {
        url: "/member",
        abstract: true
    })
    .state("member.list", {
        url: "/list",
        views: {
            "" : {
                templateUrl: "/js/angular/partials/member/list.html?" + Math.random(),
                controller: 'MemberController'
            }
        }
    });
});

如果我将其更改为：

angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
    $stateProvider
    .state("member", {
        url: "/member/list",
        views: {
            "" : {
                templateUrl: "/js/angular/partials/member/list.html?" + Math.random(),
                controller: 'MemberController'
            }
        }
    });
});

我做了

$state.go("member");

一切正常。加载html并将其解析到主视图，但是使用第一个版本并执行

$state.go("member.list");

它不会将html解析为主视图。它确实加载了html（我可以在调试器中看到它），但html没有放在视图中。我做错了什么？

编辑1

我找到了this，但这并不是很有用，因为我是以编程方式进行的，而不是使用html :(

编辑2

小提琴不工作： http://jsfiddle.net/8ET4L/

小提琴工作： http://jsfiddle.net/FFx95/

编辑3 修正：

angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
    $stateProvider
    .state("member", {
        url: "/member",
        abstract: true,
        template: "<div ui-view />"
    })
    .state("member.list", {
        url: "/list",
        views: {
            "" : {
                templateUrl: "/js/angular/partials/member/list.html?" + Math.random(),
                controller: 'MemberController'
            }
        }
    });
});

Answer 1

作为文档says：

请记住：抽象状态仍然需要他们自己的<ui-view/> 孩子们插上去。因此，如果您正在使用抽象状态添加网址，设置解析/数据或运行onEnter / Exit功能，那么你还需要设置template: "<ui-view/>"。

这意味着你必须拥有：

<div ng-app="App" ng-controller="AppCtrl">
    <div ui-view>
       <div ui-view>
        this is the main view
       </div>
    </div>
</div>

在你的小提琴里。查看我的updated example。

或者你可以在州定义上声明它：

.state("member", {
    url: "/member",
    abstract: true,
    template: "<div ui-view/>"
})

请参阅another fiddle。

HTML未被解析以查看 - angular.js

1 个答案: