Question

我正在尝试使用ng-class="'red'"显示嵌套模板。

AngularJS路由配置

ui-view

主页：angular.module('myApp') .config(['$stateProvider', function ($stateProvider) { $stateProvider .state('home', { url: '', abstract: true }) .state('home.default', { parent: 'home', url: '/home', data: { pageTitle: 'Homepage' }, views: { 'content@': { templateUrl: 'app/default/default.html', controller: 'defaultController', controllerAs: 'defaultController' } } }) .state('default.subview', { parent: 'default', url: '/default/subview', data: { pageTitle: 'Homepage - subview' }, views: { 'content@': { templateUrl: 'app/subview/subview.html', controller: 'subviewController', controllerAs: 'subviewController' } } }) ; }]);

/#/home

子视图： <h2>Homepage</h2> <select> <option>Subview</option> </select> <hr>  <div ui-view=""></div>

/#/home/subview

基本上，我希望在访问（/＃/ home / subview）时包含父视图（home）和子视图的内容。但是，仅显示子视图内容。

有关如何在AngularJS中正确使用<h2>Subview</h2>和嵌套子视图的任何提示？

Answer 1

您的子视图必须是家中的孩子，并且您将子视图的内容设置为'content @'到定义的ui视图，它将替换您在家中的视图。

我编辑了一些复制粘贴问题，因为看起来你的家庭路线在

之前被称为默认

.config(['$stateProvider', function ($stateProvider) {
$stateProvider
    .state('home', {
        url: '/home',
        abstract: true,
        template: '<ui-view/>'
    })
    .state('home.default', {

        url: '/home/default',
        data: {
            pageTitle: 'Homepage'
        },
        views: {
            '': {
                templateUrl: 'home.html',
                controller: 'defaultController',
                controllerAs: 'defaultController'
            }
        }
    })
    .state('home.subview', {
        parent: 'home',
        url: '/subview',
        data: {
            pageTitle: 'Homepage - subview'
        },
        views: {
            '': {
                templateUrl: 'subview.html',
                controller: 'subviewController',
                controllerAs: 'subviewController'
            }
        }
    });
}]);

修改

我创建了一个具有工作配置的Plunker，这个抽象的家庭状态还有一些问题（我从未让它按预期工作）但如果你点击链接，一切都会按预期显示。

Plunker

Answer 2

如果您只有一个views

，则根本不需要ui-view部分

angular.module('myApp')
.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('home', {
            url: '',
            abstract: true,
            template: '<ui-view></ui-view>'
        })
        .state('home.default', {
            // parent: 'home', // No need to set parent if you already prefixed state name
            url: '', // The default subview of an abstract view should have '' for url
            data: {
                pageTitle: 'Homepage'
            },
            templateUrl: 'app/default/default.html',
            controller: 'defaultController',
            controllerAs: 'defaultController'
        })
        .state('home.default.subview', {
            // parent: 'default', // No ned for parent
            url: '/subview', // Only pu the part of the url here that is added to the parent'ls url
            data: {
                pageTitle: 'Homepage - subview'
            },
            templateUrl: 'app/subview/subview.html',
            controller: 'subviewController',
            controllerAs: 'subviewController'
        })
    ;
}]);

此外，我还更改了index.html

中的ui-sref

<a ui-sref="home.default.subview">Subview Route</a>

home.html

中的ui-view

<!-- nested subview -->
<ui-view></ui-view>

检查这个plunker：

https://plnkr.co/edit/vEDYvXhp5mNjVT0yLRJN?p=preview

使用ui-view的嵌套模板

2 个答案: