HTML没有被解析成view - angular.js

HTML not being parsed to view - angular.js

本文关键字：view angular js HTML      更新时间：2023-09-26

我有这样的代码:

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

我发现了这个，但这并不是很有帮助，因为我是通过编程来做的，而不是用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'
            }
        }
    });
});

正如文档所说:

记住:抽象状态仍然需要它们自己的<ui-view/>孩子们插上插头。所以如果你用一个抽象的状态前置url，设置resolves/data，或者运行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>

在你的小提琴。请看我更新后的例子。

或者你可以在状态定义中声明它:

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

相关文章：