3

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

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

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


        $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/

4

2 回答 2

7

上面代码中有两个问题：

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

    抽象状态永远不会被直接激活，但可以为其公共子状态提供继承的属性。

  2. 添加状态url: ""_test.sub

    使用空 url 意味着当其父 url 被导航到时，此子状态将变为活动状态。

  3. 不要手动过渡到“测试”

请参见下面的代码：

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');
    }]);
于 2013-09-27T12:31:19.583 回答
0

将“抽象：真”添加到“测试”状态。如果您随后转换到 test.subs，您将看到子视图。

于 2013-09-27T08:54:27.440 回答