Angular-Ui-Router，嵌套命名视图 - 我做错了什么? [英] Angular-Ui-Router, nested named views - what am I doing wrong?

问题描述

我正在尝试使用 ui-router 使用嵌套命名视图来实现一个非常简单的示例，但我无法让它工作.如果有人可以看看这个 jsFiddle - http://jsfiddle.net/thardy/eD3MU/ - 和告诉我我做错了什么，我将不胜感激.

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

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

<预><代码>$stateProvider.state('测试', {网址:'/测试'，意见:{'主要的': {模板:'[h1]你好！！！[/h1]' +'[div ui-view="view1"][/div]' +'[div ui-view="view2"][/div]'}}}).state('test.subs', {网址:'',意见:{'视图1':{模板:Im View1"},'视图2':{模板:Im View2"}}});

我已经对其进行了数小时的大量调整(尝试使用绝对名称等)，但我快要发疯了.根据文档(至少对我而言)，它看起来不错，但没有任何简单的示例，而且我一定遗漏了一些明显的东西.

更新通过从测试状态中删除 url 并将 url: '' 添加到 test.subs 状态，它可以工作.但是将任何 url 添加到测试状态会导致它再次失败.在我的真实世界场景中，这些状态都不是根，并且在父状态中根本没有 url 会导致事情无法正常工作.就像那个状态没有被激活一样.根据文档，在 sub 中包含 url: '' 应该会导致它与其父状态一起被激活，但事实并非如此.

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

解决方案

上面代码中的两个问题:

1. 正如 kju 所建议的 abstract: true,

   <块引用>

   抽象状态永远不会被直接激活，但可以提供将属性继承到其共同的子状态.

2. 在test.sub状态下添加url:""

   <块引用>

   使用空的 url 意味着这个子状态将在其父的 url 被导航到.

3. 不要手动转换到测试"

见下面的代码:

angular.module('myApp', ['ui.state']).config(['$stateProvider', '$routeProvider',功能($stateProvider，$routeProvider){$stateProvider.state('测试', {摘要:真实，网址:'',意见:{'主要的': {模板:'<h1>你好！！！</h1>'+'<div ui-view="view1"></div>'+'<div ui-view="view2"></div>'}}}).state('test.subs', {网址:'',意见:{'视图1':{模板:Im View1"},'视图2':{模板:Im View2"}}});}]).run(['$rootScope', '$state', '$stateParams', 函数 ($rootScope, $state, $stateParams) {$rootScope.$state = $state;$rootScope.$stateParams = $stateParams;//$state.transitionTo('test');}]);

I'm trying to implement a very simple example using nested named views using ui-router, and I can't get it to work. If anyone could look at this jsFiddle - http://jsfiddle.net/thardy/eD3MU/ - and tell me what I'm doing wrong, I'd greatly appreciate it.

The basic idea is this: - My index.html has a single ui-view - The template that gets plugged into that has two, named ui-views - I'm trying to setup the configuration to populate these two ui-views with templates and I can't get it to work

This is the core of the fiddle (angle brackets in template replaced with []):

        $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"
                    }
                }
            });

I've tweaked it a alot for several hours now (trying absolute names, etc), and I'm about to go crazy. It looks good according to the documentation (at least to me), but there aren't any simple examples, and I must be missing something obvious.

Update By removing the url from test state and adding url: '' to the test.subs state, it works. But adding any url to test state causes it to fail again. In my real world scenario, none of these states are at the root, and having no url at all in the parent state causes things to not work well. It's like that state isn't activated or something. According to the docs, having url: '' in the sub should cause it to be activated along with it's parent state, but that's not what is happening.

Update - Solution For any who would like to see it - http://jsfiddle.net/thardy/eD3MU/

解决方案

two issues in above code:

1. As kju suggested abstract: true,

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

2. add url: "" in test.sub state

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

3. Don't manual transition to "test"

See code below:

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', {
                url: '',
                views: {
                    'view1': {
                        template: "Im View1"
                    },
                    'view2': {
                        template: "Im View2"
                    }
                }
            });
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
//        $state.transitionTo('test');
    }]);

这篇关于Angular-Ui-Router，嵌套命名视图 - 我做错了什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！