angularjs – Angular-Ui-Router,嵌套的命名视图 – 我做错了什

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

导读：我正在尝试使用ui-router使用嵌套的命名视图来实现一个非常简单的示例,我无法使其工作.如果有人能看到这个jsFiddle – http://jsfiddle.net/thardy/eD3MU/ – 告诉我我做错了什么,我会非常感激. 基本的想法是这样的： – 我的index.html只有一个ui-view –

我正在尝试使用ui-router使用嵌套的命名视图来实现一个非常简单的示例,我无法使其工作.如果有人能看到这个jsFiddle – http://jsfiddle.net/thardy/eD3MU/ – 告诉我我做错了什么,我会非常感激.

基本的想法是这样的：
– 我的index.html只有一个ui-view
– 插入的模板有两个名为ui-views的模板
– 我正在尝试设置配置以使用模板填充这两个ui视图,但我无法使其工作

这是小提琴的核心(模板中的尖括号替换为[])：

$stateProvider
            .state('test',{
                url: '/test',views: {
                    'main': {
                         template:  '[h1]Hello!!![/h1]' +
                                    '[div ui-view="view1"][/div]' +
                                    '[div ui-view="view2"][/div]'
                    }
                }
            })
            .state('test.subs',{
                url: '',views: {
                    'view1': {
                        template: "Im View1"
                    },'view2': {
                        template: "Im View2"
                    }
                }
            });

我现在已经调整了好几个小时(尝试绝对名字等),我即将发疯.根据文档(至少对我而言)它看起来不错,但是没有任何简单的例子,我必须遗漏一些明显的东西.

更新
通过从测试状态中删除url并将url：”添加到test.subs状态,它可以正常工作.但是将任何url添加到测试状态会导致它再次失败.在我的真实场景中,这些状态都不在根,并且在父状态中根本没有url会导致事情无法正常工作.这就像是没有激活状态或其他东西.根据文档,在sub中使用url：”会导致它与其父状态一起被激活,但这不是正在发生的事情.

更新 – 解决方案
对于任何想要看到它的人 – http://jsfiddle.net/thardy/eD3MU/

解决方法

上面代码中的两个问题：

>因为kju建议摘要：是的,

An abstract state will never be directly activated,but can provide
inherited properties to its common children states.

>在test.sub状态中添加url：“”

Using an empty url means that this child state will become active when
its parent’s url is navigated to.

>不要手动过渡到“测试”

见下面的代码：

angular.module('myApp',['ui.state'])
.config(['$stateProvider','$routeProvider',function ($stateProvider,$routeProvider) {
        $stateProvider
            .state('test',{
                abstract: true,url: '',views: {
                    'main': {
                         template:  '<h1>Hello!!!</h1>' +
                                    '<div ui-view="view1"></div>' +
                                    '<div ui-view="view2"></div>'
                    }
                }
            })
            .state('test.subs','view2': {
                        template: "Im View2"
                    }
                }
            });
    }])
    .run(['$rootScope','$state','$stateParams',function ($rootScope,$state,$stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
//        $state.transitionTo('test');
    }]);

（编辑：李大同）

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