AngularJS Просмотр не обновляется на вложенном маршруте третьего уровня с помощью углового ui-router

Question

Я пытаюсь установить маршруты на три уровня с помощью ui-router.

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

app.js

.state('elements', { 
     url: '/elements', 
     views: { 
     nav: { 
      templateUrl: 'components/directives/main-nav.html' 
     }, 
     content: { 
      templateUrl: 'views/main-nav/elements.html' 
     }, 
     localFooter: { 
      templateUrl: 'views/footer/elements-subnav.html' 
     }, 
     globalFooter: { 
      templateUrl: 'views/footer/global-footer.html' 
     } 
     }, 
     ncyBreadcrumb: { 
     label: 'elements' 
     } 
    }) 
    .state('elements.elements-library', { 
     url: '/elements-library', 
     views: { 
     nav: { 
      templateUrl: 'components/directives/main-nav.html' 
     }, 
     content: { 
      templateUrl: 'views/elements-subnav/elements-library.html' 
     }, 
     localFooter: { 
      templateUrl: 'views/footer/elements-subnav.html' 
     }, 
     globalFooter: { 
      templateUrl: 'views/footer/global-footer.html' 
     } 
     }, 
     ncyBreadcrumb: { 
     label: 'elements library' 
     } 
    }) 
    .state('elements.elements-library.neutral-colors', { 
     url: '/neutral-colors', 
     views: { 
     nav: { 
      templateUrl: 'components/directives/main-nav.html' 
     }, 
     content: { 
      templateUrl: 'views/elements-library/neutral-colors.html', 
      controller: 'pageslideController' 
     }, 
     globalFooter: { 
      templateUrl: 'views/footer/global-footer.html' 
     } 
     }, 
     ncyBreadcrumb: { 
     label: 'neutral colors' 
     } 
    }) 

Я показываю только мир элементы-library.html файла, который имеет ссылку пройти третий уровень вложенного маршрут.

элементы-library.html

<div class="row"> 
    <div class="col-xs-12"> 

    <h2 class="evo-header-10-bold" id="neutral-colors">Neutral Colors<a ui-sref="elements.elements-library.neutral-colors" href="javascript: void(0);" class="evo-icon-10 evo-icon-circle-chevron-right" style="float: right; margin-top: 5px;"></a></h2> 

    <div class="evo-space-15"></div> 

    </div> 
</div> 

ниже нейтрально-colors.html страница, которую я хочу быть загружен в View при нажатии из элементов-library.html

нейтральных цветов .html

<div class="container"> 

<div class="row"> 
    <div class="col-xs-12"> 
    <div ncy-breadcrumb></div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-xs-12"> 
    <h2 class="evo-header-15-bold no-line">Neutral Colors</h2> 
    </div> 
</div> 

</div> 

А из файла index.html Я просто показываю, что у меня есть я микробатареи данных щий вид = "содержание"

index.html

<div data-ui-view="content" class="container" ng-cloak></div> 

При нажатии на ссылку "пользовательский интерфейс-sref =" elements.elements-library.neutral-цвет ... «from elements-library.html, мой URL-адрес обновляется до http://localhost:3000/#/elements/elements-library/neutral-colors, а моя ncy-breadcrumb также обновляется до« элементов/элементов библиотеки/нейтральных цветов », но остальная часть страницы (содержимого) не обновляется.

На гнездовье третьего уровня «.state („elements.elements-library.neutral-цвет“» Я даже попытаться изменить содержание: к содержанию @ элементам: но я получаю эту ошибку:

Uncaught SyntaxError: Unexpected token ILLEGAL

Uncaught Error: [$injector:nomod] Module 'evolution' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Answer 1

я нашел решение.

Я забыл включить «вид» в моем файле элементы-library.html.

<div data-ui-view="content" ng-cloak></div> 

Взгляните на этот пост Three level nested routes in angular-ui-router