kątowa routingu ui-view wewnątrz innego ui-view

Question

przegląd

Poczęcia:

Mamy dwa zaczepy na index html. Tam routingu te wypustki tak:

<div ui-view></div> 

Na drugiej karcie mamy wyboru, zawartość tej karcie przełącznika w innym ui-view tak:

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

gdzie vm.currentView jest nazwa stanu routingu ("book1" itd.).

.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' 
      } 
     } 
    }); 

Wszystko jest w porządku, oprócz jednej rzeczy: zawartość danych i nazwa widoku się zmienia, ale zawartość szablonu nie jest.

Rozwiązałem go w inny sposób (na podstawie wykluczenia "ui-view wewnątrz innej koncepcji ui-view" i oddzielnych widoków w stanach). Ale nadal chcę wiedzieć: "Jak to zrobić, korzystając z koncepcji" ui-view inside ui-view "?"

Here's a Plunker Example

Answer 1

To możliwe, aby zrobić "ui-view wewnątrz innego interfejsu użytkownika".

Powiedzmy, że masz indeks .html

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

i stan dostawcą jest tak: -

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

W books.html masz jakieś linki i inną UI-view (zagnieżdżona ui-view). Po kliknięciu linku wypełnia się zagnieżdżony widok ui.

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> 

teraz stan jest dostawcą: -

$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 @ książek: - wypełnić UI-View 'bookDetails' w stanie 'Książki' albo my Można powiedzieć, że znajduje się w widoku "bookDetails" wewnątrz "książek" i zapełnia go obiektem "widoków".

Answer 2

Jak wyjaśniono wcześniej i po prostu chcą, aby 'ui-view wewnątrz innego UI-View', ale wydaje się niemożliwe. Znalazłem dwa sposoby rozwiązania tego "błędu" (?).

Pierwszy sposób: Wyłącz 'ui-view wewnątrz innego ui-view' i użyj 'ng obejmują'

Najprostszy wariant z minimalną zmianą kodu. Jak widać here, Wymieniłem

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

z

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

i dodać funkcję kontrolera, ów przełączać szablony:

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'; 
      } 
     } 

Drugi sposób: Formalnie zapisać „ui-view wewnątrz inny widok "i oddzielne widoki według stanów

I jak widzisz , formalnie zapisuję 'ui-view wewnątrz interfejsu użytkownika', ale w rzeczywistości w pełni zastępuję pojedynczy widok interfejsu przez inny pojedynczy widok interfejsu użytkownika (nie mogę ustawić drugiego widoku interfejsu użytkownika przez Nazwa).

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

Jeżeli zawartość tab2.html jest:

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

Gdy selektor zmienił zgłoszę vm.changeHandbook (vm.selectedBook) przełączyć szablony:

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

Jest to najdziwniejszy i najtrudniejszy sposób, ale ostatecznie otrzymujemy bardziej przejrzysty kod.