Вложенные Просмотров в AngularJS не работает

Question

У меня есть следующие маршрутизации установить для моего приложения:

$stateProvider 
    .state('mac', { // domain.com/mac 
     url: "/mac", 
     views: { 
      'body': { 
       templateUrl: 'partials/products/mac.body.html' 
      }, 
      'content': { 
       templateUrl: 'partials/products/mac.home.html' 
      } 
     } 
    }) 
    .state('mac.design', { // domain.com/mac/design 
     url: "/design", 
     views: { 
      'body': { 
       templateUrl: 'partials/products/mac.body.html' 
      }, 
      'content': { 
       templateUrl: 'partials/products/mac.design.html' 
      } 
     } 
    }) 
    .state('mac.features', { // domain.com/mac/features 
     url: "/features", 
     views: { 
      'body': { 
       templateUrl: 'partials/products/mac.body.html' 
      }, 
      'content': { 
       templateUrl: 'partials/products/mac.features.html' 
      } 
     } 
    }) 
    .state('iphone', { // domain.com/iphone 
     url: "/iphone", 
     views: { 
      'body': { 
       templateUrl: 'partials/products/iphone.body.html' 
      }, 
      'content': { 
       templateUrl: 'partials/products/iphone.home.html' 
      } 
     } 
    }) 
    ... 

index.html выглядит следующим образом:

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

А потом внутри mac.body.html:

<div ng-include="'partials/header.html'"></div> 

<div class="view-container"> 
    <div ui-view="content" class="view-frame"></div> 
</div> 

И затем, наконец, внутри mac.home.html:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h1>Mac</h1> 

     </div> 
    </div> 
</div> 

body просмотр загрузок в порядке с заголовком включает, но контент не ... Любые идеи почему?

Содержимого файл должен быть доступным для поиска, но я думаю, что я решил, что, как вопрос, как если бы я заменить templateUrl с template: 'test content', что также не появляется ... так что кажется, что он не может видеть фактическая ui-view="content"

---

Другой способ смотреть на это:

.state('home', { 
      url: "/", 
      views: { 
       'layoutFile': { 
        templateUrl: 'partials/layoutDefault.html' 
       }, 
       'contentFile': { 
        templateUrl: 'partials/home/index.html' 
       } 
      } 
     }) 

Поэтому в основном я могу выбрать рассматривающей показать, что. Но вот как получить представление contentFile, которое будет видно по состоянию, когда оно вложено внутри другого, так ...

Answer 1

Это то, что мне удалось получить рабочий:

$stateProvider 
    .state('home', { 
     abstract: true, 
     url: "/", 
     views: { 
      'body': { 
       templateUrl: 'partials/home/home.body.html' 
      } 
     }  
    }) 
    .state('home.index', { 
     url: "", 
     views: { 
      'content': { 
       templateUrl: 'partials/home/home.content.html' 
      } 
     } 
    }) 

Поэтому в основном я создал дом базовое состояние, а затем кучу дочерних состояний, которые наследуют от этого состояния верхнего уровня ... делает смысл при использовании на практике и означает, что вы можете иметь несколько просмотров в каждом состоянии ACTUAL, а также наследование.

ВАЖНО: Что-то следует отметить, что вы не можете связаться с государством home больше, как это абстрагироваться, поэтому лучше, чтобы способ сделать это без ссылки на home.index является следующее:

$stateProvider 
    .state('base', { 
     abstract: true, 
     url: "/", 
     views: { 
      'body': { 
       templateUrl: 'partials/home/home.body.html' 
      } 
     }  
    }) 
    .state('home', { 
     parent: 'base', 
     url: "", 
     views: { 
      'content': { 
       templateUrl: 'partials/home/home.content.html' 
      } 
     } 
    }) 

Таким образом, это означает, что вы можете использовать дом как свое состояние, но оно будет использовать базу в качестве родителя.

Answer 2

В ваших определениях состояний говорится, что у вас будет собственное состояние с телом и содержимым, однако из того, что вы описать, как вы определяете представление содержимого как дочерний элемент представления тела, а не ваше домашнее состояние. В основном вы говорите с вашим государственным торможением, что вы будете делать это:

index.html для домашнего государства:

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

Однако то, что вы на самом деле делаете это:

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

Это означает, что вы сделали представление содержимого дочерним по отношению к телу, а не суб-представлением, если ваше основное состояние.

См. Это plunk.