使用Angular 1.5组件的嵌套路由中的相对视图

时间:2016-09-15 15:34:04

标签: angularjs angular-ui-router

我在使用以下方法在嵌套路线中使用相对命名视图时遇到了问题:

Angular 1.5.8& angular-ui-router 1.0.0-beta.2

在我的' layout.dashboard'在下面的状态,我有我的观点对象与键'证书'和'活动'。每个视图都链接到一个带有空控制器的超级基本组件和一个带有一些简单文本的模板.... 但是,我的视图对象中的组件没有显示。

根据文档here,我应该可以去:

<div ui-view='certs'></div> //Should be in parent -> dashboard.tmpl.html

但这些组件都没有出现。我哪里错了?

app.js

$stateProvider
    .state('login', {
    url: '/login',
        param: {error: null},
        component: 'login'
    })
    .state('layout', {
        abstract: true,
        component: 'layout',
        resolve: {
            User: function (AuthorizeService, $state) {
                    return AuthorizeService.isAuthorized()
                            .catch(function(){
                                 $state.go('login', {error: 'Please Login'});
                            });
            },
             Organizations : function(OrganizationService, UserService){
                 return OrganizationService.getOrgs().then(function(result){
                     OrganizationService.setCurrentOrg(result.data[0]);
                     return result.data;
                 })
             }
        }
    })
    .state('layout.dashboard', {
        url: '/dashboard',
        component : 'dashboard',
        resolve : {
            certifications: function (OrganizationService) {
                return OrganizationService.getCurrentOrg().then(function(result) {
                    return OrganizationService.getCertifications(result);
                });
            }
        },
        /******THESE ARE NOT DISPLAYING*********/
        views : { 
            certs : { component: 'certificationsList' },
            activity: { component: 'activityList' }
        }
    })

layout.tmpl.html

<div class="container-fluid">

        <div class='header-bar'>

            <div class='header-bar_logo'>
                <a ui-sref="layout"><img src='assets/images/app-logo.png' alt='' /></a>
            </div>

            <div class='header-bar_user'>
                <div class="avatar">
                    <img ng-src="{{dash.user.avatar}}" class="profile-photo">
                </div>
                <div class="info">
                    <h4 class="name">{{dash.user.name}}</h4>
                    <p>{{dash.user.points}}</p>
                </div>
            </div>

        </div>

        <section id="main">
            <div class='main-sidebar'>

                <!-- Browse Certifications, Browse Courses , Account, -->
                <div ui-sref="layout.dashboard" ui-sref-active="active" class="main-menu-item">
                    <h3><i class="fa fa-certificate"></i>Certifications</h3>
                </div>
                <div ui-sref="dashboard.courses" ui-sref-active="active" class="main-menu-item">
                    <h3><i class="fa fa-book"></i>Courses</h3>
                </div>
                <div ui-sref="dashboard.users" ui-sref-active="active" ng-class="{'disabled': !dash.isAdmin()}" class="main-menu-item">
                    <h3><i class="fa fa-user"></i>Users</h3>
                </div>
                <div ui-sref="dashboard.analytics" ui-sref-active="active" ng-class="{'disabled': !dash.isAdmin()}" class="main-menu-item">
                    <h3><i class="fa fa-line-chart"></i>Analytics</h3>
                </div>
                <div ui-sref="dashboard.account" ui-sref-active="active" class="main-menu-item">
                    <h3><i class="fa fa-cog"></i>Account</h3>
                </div>

            </div>

            <div class='main-content-wrapper'>
                <alert-list></alert-list>
                <ui-view></ui-view>
            </div>
        </section>

    </div>

dashboard.tmpl.html

    <div class="dashboard-wrapper">
        <h1>Overview</h1>
        <div class="header">
            <div class="header-content">
            <h3>Header News Feed?</h3>
            </div>
        </div>
        <div class="dashboard-content">
            <div class="left-column">
                <div ui-view="certs"></div>
            </div>
            <div class="right-column">
                <div ui-view="activity"></div>
            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:2)

问题解决了。在文档的最后,有这一点。这需要更多的关注,所以这里是:

  

如果状态具有视图对象,则忽略任何状态级视图属性(Ng1ViewDeclaration)。因此,如果在视图对象中声明了状态的任何视图,则必须在视图对象中定义所有状态视图。州声明不得包含以下任何字段:

  • 组件
  • 绑定
  • resolveAs
  • 模板
  • templateUrl
  • templateProvider
  • 控制器
  • controllerAs
  • controllerProvider

换句话说,这是无效:

 .state('layout.dashboard', {
    url: '/dashboard',
    component : 'dashboard',
    resolve : {
        certifications: function (OrganizationService) {
            return OrganizationService.getCurrentOrg().then(function(result) {
                return OrganizationService.getCertifications(result);
            });
        }
    },
    /*****Because a view object exists, component is ignored*****/
    views : { 
        certs : { component: 'certificationsList' },
        activity: { component: 'activityList' }
    }
})

以下是解决方案:

    .state('layout.dashboard', {
        url: '/dashboard',
        resolve : {
            certifications: function (OrganizationService) {
                return OrganizationService.getCurrentOrg().then(function(result) {
                    return OrganizationService.getCertifications(result);
                });
            }
        },
        views :
                {
                "" : {component: 'dashboard'},
                "certs@layout.dashboard" : { component: 'certificationsList' },
                "activity@layout.dashboard" : { component: 'activityList' }
                }
    })