Angular-Ui-Router,嵌套命名视图 - 我做错了什么?

2024-03-30

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

基本思想是这样的: - 我的index.html有一个用户界面视图 - 插入的模板有两个名为 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"
                    }
                }
            });

我已经对它进行了很多调整几个小时(尝试绝对名称等),我快要发疯了。根据文档(至少对我来说),它看起来不错,但是没有任何简单的示例,而且我一定错过了一些明显的东西。

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

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


上面代码中的两个问题:

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

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

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

    使用空 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');
    }]);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular-Ui-Router,嵌套命名视图 - 我做错了什么? 的相关文章

随机推荐