Angular ui-router에서 중첩된 상태의 URL이 변경되었지만 템플릿이 로드되지 않습니다.

Angular ui-router에서 중첩된 상태의 URL이 변경되었지만 템플릿이 로드되지 않습니다.

네스트된 상태 및 뷰에 ui-router를 사용하고 있습니다.링크를 클릭하면 URL이 서브스테이트의 URL로 변경되지만 템플릿이 로드되지 않습니다.

예를 들어 URL이 서브스테이트로 변경되는 경우project/settings대응하는 템플릿,project.settings.html로딩되지 않습니다.

다음은 Plunkr의 SSCE 제공

아래도 제 코드입니다.

app.module

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.displaces를 표시합니다.

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

project.discloss를 실행합니다.

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

프로젝트.settings.syslog

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

중첩된 프로젝트.설정 상태는 '@' 접미사를 사용하여 명시적으로 상위 상태의 보기를 처리해야 합니다.

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

자세한 것은, https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names 를 참조해 주세요.

우선 파일 이름 변경project.settings.htmltemplateurl 및 파일 이름에서projectSettings.html(점 제거).

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

프로젝트 템플릿에 두 개의 div를 추가하여 하위 페이지를 로드합니다(header abd projectSettings).

주의: 이 디바의 콘텐츠는 여기에 로드된 페이지로 대체됩니다.

project.discloss를 실행합니다.

     <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>

저도 같은 문제가 있어서 해결방법은 부모님 템플릿에 ui-view를 배치하는 것이었습니다.파셜도 자 상태에서 템플릿을 로드하는 경우 가 필요하기 때문입니다.https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading--showing 를 참조해 주세요.

UI 라우터에서 중첩된 보기를 사용하는 경우 상위 페이지의 html에 UI 보기를 추가하고 지정된 특정 보기를 포함해야 합니다.

같은 문제가 있었습니다.해결책은 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>

그리고 넌 가도 돼;)

사용하다ui-sref="project.settings"링크용project.html템플릿입니다.

언급URL : https://stackoverflow.com/questions/21424524/in-angular-ui-router-nested-state-url-changes-but-template-is-not-loading