В Angular URL-адрес вложенного состояния uri-маршрутизатора, но шаблон не загружается

Я использую ui-router для вложенных состояний и представлений. Когда я нажимаю на ссылку, URL-адрес изменяется на URL-адрес для подстанции, но шаблон не загружается.

Например, когда URL-адрес изменяется на подэлемент project/settings, соответствующий шаблон project.settings.html не загружается.

Вот любезность SSCCE Plunkr

Ниже приведен мой код:

app.js

myApp.config(function ($stateProvider, $urlRouterProvider){
             $stateProvider
                  .state('project', {
                         url: "/project",
                         views:{
                         "content":{templateUrl: "partials/project.html"},
                         "header":{templateUrl: "partials/header"}
                         }
                       })

                  .state('project.settings', {
                          url: "/settings",
                          views:{
                           "content":{templateUrl: "partials/project.settings.html"},
                           "header":{templateUrl: "partials/header"}
                          }
                         }) 
            $urlRouterProvider.otherwise("/")                   
   }); 

    /* cheching whether the user is authentic or not*/


 myApp.run(function($rootScope,$location,$cookieStore,validateCookie,$state) {
      $rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState){
         if($cookieStore.get('user')){
            validateCookie.authService(function(result,error){
              if(!result){
                 $location.path("/");
              }else{
                $state.go('project.settings');
              }
            });   
         }
         else{
            $location.path("/"); 
         }
        });
    });

index.html

                <div ng-controller="userController">
                    <div ui-view="header"></div>
                    <div class="container" ui-view="content"></div>
                </div>

project.html

            <div ng-controller="userController">
                <div class="details">
                    <a ui-sref=".settings" class="btn btn-primary">Settings</a>
                </div>
            </div>

project.settings.html

        <h1>Project Setting -State test</h1>

Ответ 1

Прежде всего измените имя файла project.settings.html в templateurl и имя файла на projectSettings.html (удалить точку).

   .state('project.settings', {
         url: "/settings",
          views:{
               "content":{templateUrl: "partials/projectSettings.html"},
               "header":{templateUrl: "partials/header"}
           }
    })

Добавьте два div в шаблон проекта, чтобы загрузить вспомогательные страницы (header abd projectSettings)

Примечание. Любое содержимое в этих divs будет заменено на страницу, загруженную здесь.

project.html

     <div ng-controller="userController">
        <div class="details">
            <a ui-sref=".settings" class="btn btn-primary">Settings</a>
        </div>
        <div ui-view="header">( Project Page header will replace with projectSettings header )</div>
        <div class="container" ui-view="content">( Project Page content will replace with projectSettings Content )</div>

    </div>

Ответ 2

Вложенное состояние project.settings должно адресовать представление в более высоком состоянии явно с использованием суффикса '@', то есть.:

.state('project.settings', {
        url: "/settings",
        views:{
              "[email protected]":{templateUrl: "partials/project.settings.html"},
              "[email protected]":{templateUrl: "partials/header"}
        }
 })

Подробнее см. здесь https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

Ответ 3

У меня была такая же проблема, и решение заключалось в размещении ui-view в родительском шаблоне. Потому что ваши частичные части также нуждаются в слишком, если они будут загружать шаблон из дочернего состояния. См. Здесь https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading--showing

Ответ 4

Если вы используете вложенные представления с UI-маршрутизатором, обязательно добавьте ui-view в html родительской страницы и включите определенные именованные представления.

Ответ 5

У меня была та же проблема, решение было; откройте файл project.html (который является родительской) и завершите все в <ui-view>

Итак, замените их:

<div ng-controller="userController">
  <div class="details">
    <a ui-sref=".settings" class="btn btn-primary">Settings</a>
  </div>
</div>

с этими:

<ui-view>
 <div ng-controller="userController">
   <div class="details">
     <a ui-sref=".settings" class="btn btn-primary">Settings</a>
   </div>
 </div>
</ui-view>

и вам будет хорошо идти;)

Ответ 6

Используйте ui-sref="project.settings" для ссылки в шаблоне project.html.