2016-06-22 4 views
1

저는 components가있는 angularjs 앱이 있으며 ui.router를 사용하여 다른 뷰의 하위 뷰를 추가하려고합니다. 나는 정직하게 ui.router가 구성 요소를 완전히 지원한다고 생각하지 않습니다. 이것은 upcomping 1.0 버전에서 발생할 수 있습니다. 그러나 한편으로 디스플레이 뷰를 동적으로 사용하기 위해 할 수있는 일은 무엇입니까?각도 구성 요소가있는 동적 중첩 뷰

(function() { 
    'use strict'; 
function ChatController($scope, $element, $attrs, $firebaseArray) { 
    var ctrl = this; 


    console.log("it works"); 

} 
angular.module('myapp').component('chat', { 
    templateUrl: '/app/component/project/chat.html', 
    controller: ChatController 
}); 
})(window.angular); 

하고 난 projectDetails에서보기를 추가했습니다 :

내 $의 stateProvider는

$stateProvider 
    .state('home', { 
    url :'/home', 
    template :'<home></home>' 
    }) 
    .state('projects', { 
    url:'/projects', 
    template: "<project-list></project-list>" 
    }) 
    .state('projectDetails',{ 
    url:'/:projectId', 
    template : '<project-detail projectDetails="projectDetails"></project-detail>' 
    , views :{ 
     'chat':{ 
      template : '<chat></chat>' 

     } 
    } 
    }); 
    $urlRouterProvider.otherwise('home'); 

내가이 방법으로 구성 요소를 만들었습니다 (난 내 시도를했던)한다

<div ui-view="chat"></div> 
+0

라우터에는 중첩 된 상태가 있습니다. 사용 해본 적이 있습니까? – Raghu

+0

OP는 분명히 그가 ui-router가 구성 요소를 지원하는지 알지 못합니다. 그래도 ngRoute가 작동하는지 확인할 수 있습니다. –

+0

나는 ui.router 문서를 이미 시험해 보았지만 작동하지 않습니다. 하위 상태를 정의하고 필요에 따라 ui-view 태그를 추가하고 $ state.go ('substate')를 추가하십시오. – David

답변

0

내 요구 사항을 이해하기 위해서는로드하려는 '채팅'이라는 구성 요소가 있어야합니다. 상태 '프로젝트 세부 정보'는 중첩 된/하위보기로 표시됩니다. 이미 ui-router는 이것을 지원하지 않으므로 이것을 지원하지 않습니다.

하지만 '프로젝트 세부 정보'를 부모 상태로 만들고 다른 구성 요소를 하위 상태로로드하여이 작업을 수행 할 수 있습니다.

Plunker Demo

희망이 당신이 그것을 추상 상태로 만드는 부모 state.Consider에 URL을 추가하지 wanted.Please 것입니다.

관련 문제