Angular JS 지시문/템플릿을 동적으로로드하는 방법

Question

각도 js 지시문을 동적으로로드하려고합니다.

내가 3 개 지시

을 가지고 고려

<apple data="data"/> 

apple.html이

<banana data="data"/> 

banana.html 바나나

<mango data="data"/> 

에 대한 UI를 제공한다 애플의 UI를 제공합니다 mango.html은 mango 지시어 UI를 제공합니다.

(210)

나는

데이터 내 JSON 데이터를 기반으로 이러한 지침 중 하나를로드 할 : {fruittype : "사과"fruitObj을 : { "..."}} UI 층에

우리는 실제로 과일 각도 태그를 보유 할 JSP를

내 질문은 JSP에서 무엇을 작성하는 것입니다 (중 <apple>, <banana> 또는 <mango> 즉) 논리?

일반적으로 정적 JSP에서는 다음과 같이 작성합니다.

<div ng-app="fruitApp"> 
<apple></apple> 

</div> 

Answer 1

당신은 아래와 같이 지시 템플릿에 템플릿을 templateUrl를 얻을 수 있도록 지침의 범위에 함수를 정의하고 포함 할 수

app.directive("fruit", function() { 

    return { 
    scope: { 

     data: '=data', 
     fruitType: '@type' 

    }, 
    link: function(scope, element, attrs) { 
     scope.getTemplate = function() { 

     //path to yours templetes 
     return scope.fruitType + '.html'; 
     } 
    }, 
    template: '<div ng-include="getTemplate()"></div>', 


    } 


}) 

전체 작업 데모 여기에 어떤 조건에 대한http://plnkr.co/edit/VC6NfnYpcKFyhwgOot38?p=preview