同一个ui-view angularjs

Question

我需要在同一视图中有3个元素，我不知道该怎么做，我有我的ui-view ='main'，我可以显示我的菜单，但我不知道如何显示模板同一视图中的所选菜单

这是我的路由

    routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider){

$stateProvider
    .state("connexion", {
        url: "/connexion",
        templateUrl: 'Template/connexion.html',
        controller: 'PostController'
    })
    .state("accueil", {
        url: "/",
        templateUrl: 'Template/connexion.html',
        controller: 'PostController'
    })
    .state('agenda', {

        url: "/agenda",
        views: {

            // for column two, we'll define a separate controller
            '': {

                templateUrl: 'Template/agenda.html',
                controller: 'customersCtrl',
                resolve:{
                    "check":function($cookies,$location){   //function to be resolved, accessFac and $location Injected

                        // console.log($cookies.get('user'));
                        if ($cookies.get('user')){    //check if the user has permission -- This happens before the page loads

                            // $cookies.remove('user');

                        }else{
                            $location.path('/');                //redirect user to home if it does not have permission.
                            alert("Vous devez vous connecter pour acceder a cette page");
                        }
                    }
                }
            },
            'main':{

                url: "/menu",
                templateUrl: 'Template/menuAddAgenda.html'

               /* //i want to put here
                ("bar", {

                    url: "/bar",
                    templateUrl: 'Template/bar.html'
                })

                ("foo", {

                url: "/bar",
                templateUrl: 'Template/foo.html'
                })
                */
            }
        }

    })

$urlRouterProvider.otherwise("/");

$locationProvider.html5Mode(true);

这是我的模态代码

    <div class="modal-body" id="modal-body">

<div class="row">
    <div class="span12 ui-view-container">
        <div class="well" ui-view="main"></div>
    </div>
</div>

<div ng-view></div>

这是我的代码菜单

<div class="navbar">
<div class="navbar-inner">
    <a class="brand" href="#">Quick Start</a>
    <ul class="nav">
        <li><a ui-sref="foo">Route 1</a></li>
        <li><a ui-sref="bar">Route 2</a></li>
    </ul>
</div>

我的菜单显示正确，但我不知道如何使用我的ui-sref设置路线要在同一视图中显示

如果有人可以帮助我

提前预付

修改

我试过这个，但它不适用于此错误错误：无法解决'bar''来自州'议程'

.state('bar', {
            url: '/bar',
            views: {
                'main@agenda': {

                    abstract :true,
                    template: '<h1>bar</h1>'


                }
            }
        })

并且使用它在我的ng-view =“main”中效果很好但是我的第一个没有名字的窗口模式后面的ng-view消失了

.state("bar", {

            url: "/bar",
            views: {

                'main':{
                    template: '<h1>bar</h1>'

                }

            }
        })

当放置父母时它不再起作用

      .state("bar", {

        url: "/bar",
        parent:'agenda',
        views: {

            'main':{
                template: '<h1>bar</h1>'

            }

        }
    })

RE EDIT

我阅读了文档，我看到了这个

在1.2.0之前使用.setNestedState而不是.state。在1.2.0中，不推荐使用setNestedState，而使用.state，

所以我做了这个

我需要观看但是没有工作

routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider,stateHelperProvider){

    stateHelperProvider
        .state({
            name: "connexion",
            url: "/connexion",
            templateUrl: 'Template/connexion.html',
            controller: 'PostController'
        })
        .state({
            name: "accueil",
            url: "/",
            templateUrl: 'Template/connexion.html',
            controller: 'PostController'
        })
        .state( {
            name:'agenda',
            url: "/agenda",
            children: [
                {
            views: {
                        // for column two, we'll define a separate controller
                        '': {

                            abstract: true,
                            templateUrl: 'Template/agenda.html',
                            controller: 'customersCtrl',
                            resolve: {
                                "check": function ($cookies, $location) {   //function to be resolved, accessFac and $location Injected

                                    // console.log($cookies.get('user'));
                                    if ($cookies.get('user')) {    //check if the user has permission -- This happens before the page loads

                                        // $cookies.remove('user');

                                    } else {
                                        $location.path('/');                //redirect user to home if it does not have permission.
                                        alert("Vous devez vous connecter pour acceder a cette page");
                                    }
                                }
                            }
                        },

                        'main': {

                            abstract: true,
                            templateUrl: 'Template/menuAddAgenda.html',
                            children:[

                                 {
                                    name:'foo',
                                    abstract: true,
                                    template: '<h1>foo</h1>'

                                },
                                {
                                    name:'bar',
                                    abstract: true,
                                    template: '<h1>bar</h1>'

                                }

                            ]
                        }

                    }
                }]
        })

    $urlRouterProvider.otherwise("/");

    $locationProvider.html5Mode(true);
})

但是这个适用于view =''，但不适用于view ='main'

routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider,stateHelperProvider){

    stateHelperProvider
        .state({
            name: "connexion",
            url: "/connexion",
            templateUrl: 'Template/connexion.html',
            controller: 'PostController'
        })
        .state({
            name: "accueil",
            url: "/",
            templateUrl: 'Template/connexion.html',
            controller: 'PostController'
        })
        .state( {
            name:'agenda',
            url: "/agenda",
            views: {
                        // for column two, we'll define a separate controller
                        '': {

                            abstract: true,
                            templateUrl: 'Template/agenda.html',
                            controller: 'customersCtrl',
                            resolve: {
                                "check": function ($cookies, $location) {   //function to be resolved, accessFac and $location Injected

                                    // console.log($cookies.get('user'));
                                    if ($cookies.get('user')) {    //check if the user has permission -- This happens before the page loads

                                        // $cookies.remove('user');

                                    } else {
                                        $location.path('/');                //redirect user to home if it does not have permission.
                                        alert("Vous devez vous connecter pour acceder a cette page");
                                    }
                                }
                            }
                        }
                    },
            children: [
                {
                    views:{
                        'main': {

                            abstract: true,
                            templateUrl: 'Template/menuAddAgenda.html'

                        },
                        'foo': {

                            abstract: true,
                            template: '<h1>foo</h1>'

                        },
                        'bar': {

                            abstract: true,
                            template: '<h1>bar</h1>'

                        }
                    }
                }]
        })

    $urlRouterProvider.otherwise("/");

    $locationProvider.html5Mode(true);
})

我创建了一个plunker

https://plnkr.co/edit/Zyrj3gRv1cGZpcWwhXfL?p=preview

但我对这个plunker有问题，因为我的菜单必须在模态（view ='main'）而不是在其他视图外面=''

Answer 1

你可以尝试一下

ca-bundle

它的语法是.state('main', { url: '/main', views: { foo@main :{ // } bar@main:{ // } } 。 您可以在此处查看更多信息 https://scotch.io/tutorials/angular-routing-using-ui-router

修改

脚本中的补丁

https://cdnjs.com/libraries/angular-ui-router.statehelper 并在你的app模块中添加对ui.router.stateHelper的依赖。

viewname@statename

并且喜欢这个

angular.module('yourapp', [ 'ui.router', 'ui.router.stateHelper' ])

此处了解更多信息

https://github.com/marklagendijk/ui-router.stateHelper