Ui-vue de routage angulaire à l'intérieur d'une autre ui-vue

Conception aperçu:

Nous avons deux onglets sur les index html. Il nous routage de ces onglets comme ça:

<div ui-view></div>

Sur un deuxième onglet, nous avons un sélecteur qui permet de basculer de l'onglet contenu dans un autre ui-view comme ça:

<div ui-view="{{vm.currentView}}"></div>

où vm.lors de la est un nom de routage de l'état (la "classeur1" et etc.).

 .state('tab2', {
        abstract: true,
        templateUrl: 'tab2.html',
        controller: 'Tab2Controller',
        controllerAs: 'vm'
    })
    .state('tab2.content', {
        url: '/tab2',
        views: {
            '': {
                templateUrl: 'tab2.html'
            },
            'book1@tab2': {
                templateUrl: 'tab2-book1.html'
            },
            'book2@tab2': {
                templateUrl: 'tab2-book2.html'
            },
            'book3@tab2': {
                templateUrl: 'tab2-book3.html'
            },
            'book4@tab2': {
                templateUrl: 'tab2-book4.html'
            }
        }
    });

Tout est bon, sauf une chose: le contenu des données et le nom de la vue est en train de changer, mais un modèle de contenu ne l'est pas.

Je résolus par un autre moyen (basé sur les exclure " ui-view à l'intérieur d'une autre de l'interface utilisateur-la vue de la conception et des vues séparées dans les états). Mais je veux toujours savoir: "Comment faire cela avec l'aide de 'ui-view à l'intérieur de l'interface utilisateur-affichage de conception?"

Voici un Exemple Plunker

source d'informationauteur SanSan-

  1. 15

    Son possible pour rendre "ui-view à l'intérieur d'une autre ui-view'.

    Permet de dire que vous avez un index.html

    <div ui-view="content"></div>

    et de l'état fournisseur est comme ceci :-

    $stateProvider
   .state('books', {
        parent: 'pages',
        url: '/books',                   
        views: {
            'content@': {
                 templateUrl: 'books.html',
                 controller: 'BooksController'
             }
        }
   })

    Dans books.html vous avez quelques liens et une autre ui-view (nested ui-view). Cliquez sur les liens remplir le imbriquée ui-view.

    books.html

    <div>
     <a ui-sref="book1"></a>
     <a ui-sref="book2"></a>
     <a ui-sref="book3"></a>
</div>
<!-- nested ui-view -->
<div ui-view="bookDetails"></div>

    maintenant l'état fournisseur de :-

     $stateProvider
    .state('books', {
        parent: 'pages',
        url: '/books',                   
        views: {
            'content@': {
                 templateUrl: 'books.html',
                 controller: 'BooksController'
             }
        }
    })
    .state('book1', {
        parent: 'books',                  
        views: {
            'bookDetails@books': {
                 templateUrl: 'book1.html',
                 controller: 'BookOneController'
             }
        }
    })
    .state('book2', {
        parent: 'books',                 
        views: {
            'bookDetails@books': {
                 templateUrl: 'book2.html',
                 controller: 'BookTwoController'
             }
        }
    })
    .state('book3', {
        parent: 'books',                
        views: {
            'bookDetails@books': {
                 templateUrl: 'book3.html',
                 controller: 'BookThreeController'
             }
        }
    })

    bookDetails@livres :- remplir 'bookDetails' ui-view dans les "livres" de l'état ou nous pouvons dire que trouver "bookDetails' ui-view à l'intérieur de "livres" de l'état et de le remplir avec des "vues" de l'objet.

  2. 0

    Comme je l'ai expliqué plus tôt, j'ai juste envie de faire les "ui-view à l'intérieur d'une autre ui-view", mais cela semble impossible. J'ai trouvé deux façons de résoudre ce "bug"(?).

    Première façon: Exclure "ui-view à l'intérieur d'une autre ui-view "et utiliser" ng-include'

    Plus simple variante avec un minimum de changement de code. Comme vous le voyez icij'ai remplacé 

     <div ui-view="{{vm.currentView}}"></div>

    avec 

     <ng-include src="vm.getTemplateUrl(vm.selectedBook.id)"/>

    et ajouter de la fonction de contrôleur, c'est l'interrupteur modèles:

    function getTemplateUrl(id) {
            switch (id) {
                case 0:
                    return 'tab2-book1.html';
                case 1:
                    return 'tab2-book2.html';
                case 2:
                    return 'tab2-book3.html';
                case 3:
                    return 'tab2-book4.html';
                default:
                    return 'tab2-book4.html';
            }
        }

    Deuxième façon: Officiellement enregistrer "ui-view à l'intérieur d'une autre ui-view" et des vues séparées par les états

    Et comme vous le voyez iciofficiellement je enregistrer "ui-view à l'intérieur ui-view", mais en fait, je viens de remplacer entièrement interface utilisateur simple-vue par le modèle à partir d'une autre interface utilisateur simple-vue (ou ne peuvent pas régler le deuxième ui-view par nom).

    $urlRouterProvider
        .when('/tab2', '/tab2/book4');

    $stateProvider
        .state('tab2', {
            url: '/tab2',
            templateUrl: 'tab2.html'
        })
        .state('tab2.book1', {
            url: '/book1',
            params: {
                id: 0
            },
            templateUrl: 'tab2-book1.html',
            controller: 'Tab2Controller',
            controllerAs: 'vm'
        })
        .state('tab2.book2', {
            url: '/book2',
            params: {
                id: 1
            },
            templateUrl: 'tab2-book2.html',
            controller: 'Tab2Controller',
            controllerAs: 'vm'
        })
        .state('tab2.book3', {
            url: '/book3',
            params: {
                id: 2
            },
            templateUrl: 'tab2-book3.html',
            controller: 'Tab2Controller',
            controllerAs: 'vm'
        })
        .state('tab2.book4', {
            url: '/book4',
            params: {
                id: 3
            },
            templateUrl: 'tab2-book4.html',
            controller: 'Tab2Controller',
            controllerAs: 'vm'
        });

    Où le contenu de tab2.html est:

    <ui-view class="page-container"></ui-view>

    Lorsque le sélecteur de changé, j'appel vm.changeHandbook(vm.selectedBook) pour passer des modèles:

    function changeHandbook(ref) {
            $state.go(ref.value);
        }

    Ce qui est le plus étrange et le chemin difficile, mais à la fin nous obtenons plus propre code.