为多个状态设置默认视图AngularJS ui.router

发布时间：2020-12-17 07:48:02 所属栏目：安全来源：网络整理

导读：我有一个角度的应用程序的多个视图.目前,我正在使用ui.router的$stateProvider建立视图.不过,我觉得这是非常乏味的,因为我必须重复每个国家的每一个观点.有没有办法为所有州设置默认视图,而不是在每个状态重复它们？ $stateProvider.state('default',{ url:

我有一个角度的应用程序的多个视图.目前,我正在使用ui.router的$stateProvider建立视图.不过,我觉得这是非常乏味的,因为我必须重复每个国家的每一个观点.有没有办法为所有州设置默认视图,而不是在每个状态重复它们？

$stateProvider
.state('default',{
    url: '/default',views:{
        view_1: {
            templateUrl: 'view1',controller: function($scope){}
        },view_2: {
            templateUrl: 'view2',view_3: {
            templateUrl: 'view3',controller: function($scope){}
        }
    }
})
.state('changed_state',{
    url: '/changed_state',view_2: {
            templateUrl: 'changed_view2',controller: function($scope){}
        }
    }
})

我只需要列出一次所有状态的默认视图,然后只更改每个状态更改时更改的视图.即：

.state('default',views:{
        view_2: {
            templateUrl: 'changed_view2',controller: function($scope){}
        }
    }
})

谢谢

正是在UI路由器架构中已经存在：

Nested States & Nested Views

我们只会声明一个超级基础状态(例如“root”).甚至可以避免它的初始化是抽象的,但不一定要.而这个状态将定义所有的默认视图.任何子女状态或大孩子国家都可以替换以下任何默认值：

根状态

.state('root',{
    // url: '/default',- no url needed at all,but could be
    abstract: true
    views:{
        '' : { templateUrl: 'layout.html'},'view_1@root': {
            templateUrl: 'view1','view_2@root': {
            templateUrl: 'view2','view_3@root': {
            templateUrl: 'view3',controller: function($scope){}
        }
    });

上面我们可以看到,根状态注入到index.thml< div ui-view =“”>< / div>自己的模板 – 布局模板：

'' : { templateUrl: 'layout.html'},

因此,所有layout.html内的所有命名视图现在都可以填充默认视图,我们只需要使用绝对命名(见下文)

'view_1@root': { // this will inject into the layout.html of current root state

一些更有意思的点.我们不使用url …所以所有的小孩国家都可以自己定义.我们使用抽象…但它不是必须的.

儿童国家 – 这是如何从父母那里获利

.state('changed_state',{
    parent: 'root'           // this way we profit from parent
    url: '/changed_state',// HERE all other views are unchanged

还要查看：

Multiple Named Views

和

View Names – Relative vs. Absolute Names

了解更多命名’view_1 @ root'(小号)

Behind the scenes,every view gets assigned an absolute name that follows a scheme of viewname@statename,where viewname is the name used in the view directive and state name is the state’s absolute name,e.g. contact.item. You can also choose to write your view names in the absolute syntax.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!