Question

我一直试图解决这个问题3天....

我有一个管理模块：

'use strict';

angular.module('aaBlogger.admin',['aaBlogger.admin.controllers']);

angular.module('aaBlogger.admin').config(['$stateProvider', function($stateProvider){
        $stateProvider.state('admin',{
            url: '/admin',
            abstract: true,
            controller: 'AdminController',
            templateUrl: 'modules/admin/views/admin.home.html'
        }).state('admin.postNew',{
            url: '/post/new',
            controller: 'PostCreationController',
            templateUrl: 'modules/admin/views/admin.new.post.html'
        }).state('admin.postUpdate',{
            url: '/post/:id/edit',
            controller: 'PostUpdateController',
            templateUrl: 'modules/admin/views/admin.update.post.html'
        }).state('admin.postViewAll',{
            url: '',
            controller: 'PostListController',
            templateUrl: 'modules/admin/views/admin.all.posts.html'
        });
    }]
);

管理主页加载到index.html就好了。但是我无法弄清楚如何将admin.postNew状态模板加载到admin.home.html模板

管理员主页模板

<div class="row">
    <div class="col-xs-3">
        <ul class="nav nav-pills nav-stacked on-click-make-active">
            <li><a ui-sref="admin.postViewAll">View All Posts</a></li>
            <li class="active"><a ui-sref="admin.postNew">Add Post</a></li>
        </ul>
    </div>
    <div class="col-xs-9 border-left">
        <div ui-view></div>
    </div>
</div>

以防万一这是admin.postNew模板

<div class="row" ng-controller="PostCreationController">
    <div class="col-xs-8">
        <form name="newPostForm" class="form-horizontal" novalidaterole='form'>
            <div class="form-group" ng-class="{'has-error':postForm.title.$dirty && postForm.title.$invalid}">
                <label for="title" class="col-sm-2 control-label">Post Title</label>
                <div class="col-sm-10">
                    <input type="text" name="title" ng-model="post.title" ng-required="true" class="form-control" id="title" placeholder="Title">
                    <span>Permalink:<i>/posts/[id]/{{post.title | permalink}}</i></span> <br/>
                    <span class="error-message" ng-show="postForm.title.$dirty && postForm.title.$invalid">Title is mandatory boss!</span>
                </div>
            </div>
            <div class="form-group" ng-class="{'has-error':postForm.content.$dirty && postForm.content.$invalid}">
                <label for="content" class="col-sm-2 control-label">Content</label>
                <div class="col-sm-10">
                    <textarea cols="8" rows="6" name="content" class="form-control" ng-model="post.content" ng-required="true" id="content" placeholder="Content"></textarea>
                    <span>{{post.content | wordcount}} words</span> <br/>
                    <span class="error-message" ng-show="postForm.content.$dirty && postForm.content.$invalid">You need to have some content!</span>
                </div>
            </div>
            <div class="form-group" ng-class="{'has-error':postForm.tags.$dirty && postForm.tags.$invalid}">
                <label for="tags" class="col-sm-2 control-label">Tags</label>
                <div class="col-sm-10">
                    <input type="text" name="tags" class="form-control" id="tags" ng-pattern="/^[\w,]+$/" ng-model="post.tags" placeholder="Comma separated tags"/>
                    <span class="error-message" ng-show="postForm.tags.$dirty && postForm.tags.$invalid">Sorry! No special characters allowed here.</span>
                </div>
            </div>
            <div class="form-group" ng-class="{'has-error':postForm.keywords.$dirty && postForm.keywords.$invalid}">
                <label for="keywords" class="col-sm-2 control-label">Keywords</label>
                <div class="col-sm-10">
                    <input type="text" name="keywords" class="form-control" id="keywords" ng-pattern="/^[\w,]+$/"  ng-model="post.keywords" placeholder="Comma separated keywords"/>
                    <span class="error-message" ng-show="postForm.keywords.$dirty && postForm.keywords.$invalid">Sorry! No special characters allowed here</span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success" ng-disabled="postForm.$invalid">{{buttonText}}</button>
                </div>
            </div>
        </form>
    </div>
</div>

Answer 1

我有类似的问题。其解决方案

admin.home.html必须包含标记<div ui-view="content"></div>

angular.module('aaBlogger.admin').config(['$stateProvider', function($stateProvider){
    $stateProvider.state('admin',{
        url: '/admin',
        abstract: true,
        templateUrl: '<div ui-view=""></div>'
    })
    .state('admin.postNew',{
        url: '/post/new',
        views: {
            '': {
                templateUrl: 'modules/admin/views/admin.home.html',
                controller: 'AdminController'
            },
            'content@admin.postNew': {
                templateUrl: 'modules/admin/views/admin.new.post.html',
                controller: 'PostCreationController'
            }
         } 
    })
}]

）;

Angularjs ui.router chid状态未加载

1 个答案: