각도 UI 라우터 중첩 보기

Question

UI 라우터를 사용하여 일반 보기에 중첩된 보기를 삽입하려고 합니다.ng-include를 수행하면 가능하다는 것을 알고 있습니다.하지만 ui-router를 사용하여 해결하고 싶습니다.

내 HTML은 다음과 같습니다

<div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Project todos</div>
                <div class="panel-body">
                    <div ui-view="todos"></div>
                </div>
            </div>
        </div>
    </div>

그런 다음 내 스크립트에 상태가 표시됩니다.

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos': {
       templateUrl: 'views/project/todos.html'
      }
   }
})

업데이트 - 이런 게 가능하지 않나요?

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos@project': {
         templateUrl: 'views/project/todos.html'
      }
   }
})

누구든지 오타나 뭔가를 찾을 수 있나요?나는 문서를 읽었습니다.무엇이 잘못되었는지 잘 모르겠습니다.

미리 감사드립니다!

Answer 1

작업이 있습니다 플런저, 이를 실행하는 방법을 보여줍니다.

index.htm에서 우리는 <div ui-view="" ></div>, project.html을 삽입한 곳입니다.그런 다음 상태 정의를 조정하여 중첩된 뷰도 삽입합니다. ui-view 절대 이름:

  .state('project', {
    url: '/project/:projectId',

    views: {
      '' : {
        templateUrl: 'views.project.project.html',
        controller: 'ProjectCtrl',
      },
      'todos@project': {
        templateUrl: 'views.project.todos.html'
      }
    }
  });

절대적인 이름 todos@project, todos.html을 project.html에 삽입합니다.을 체크 해봐 플런저

다음을 참조하세요:

• 뷰 이름 - 상대 vs.절대 이름

인용:

...뒤에서 모든 뷰에는 다음 구성표를 따르는 절대 이름이 할당됩니다. viewname@statename, 여기서 viewname은 view 지시어에 사용된 이름이고 state name은 상태의 절대 이름입니다.연락처.항목절대 구문으로 뷰 이름을 작성하도록 선택할 수도 있습니다.