지시어의 템플릿을 동적으로 바꿈

Question

특정 요소에 따라 지시어 템플릿을 동적으로 변경할 수 있습니까?

그래서, 나는 그것이 가능하는 방법을 이론적으로 볼 수 - 당신이 사전에 $ templateCache에 모든 다른 템플릿을 놓고, 당신이 지시 컴파일

뭔가 같은에서 필요한 하나 검색 할 수 있습니다

restrict:'E' 
scope: 
    data:'=' 
    template:'=' 
link:(scope, elem, attrs)-> 
    html = $templateCache.get(scope.template) 
    tElement.html(html) 

그러나 현실 질문은, 그렇게하는 것이 옳은가? 그게 성능에 나쁜 영향을 미칠까요? 예를 들어 지시문을 큰 격자의 셀로 사용한다면?

Answer 1

지침 간 전환은 바람직하지 않습니다.

왜 ' :

당신이 드롭 다운 메뉴 (<select>)가 가정 수 있습니다, 당신은 하나 하나가 (ngModel에 의해) 자신의 선택에 연결되어 지시어의 부부를 설정했습니다.

앱이 실행

,

당신은 <select> 속성의 기본값으로 설정 초기 지시어로 시작하고 그 값을 대체하려고 할 때, 당신은에서 지침을 "삭제"할 것이다

DOM과 "쓰기"는 새로운 것을 사용합니다.

이제 jQuery처럼 들리겠습니까?

의 I 무엇을해야 그 밖의 무엇을 :

글쎄, 당신은 거의 당신의 각자를 위해 그것을 대답 사용 NG-스위치를.

ng-switch by AngularJS

참고 : 지시어 템플릿 간 전환하는 것은 당신이 그것을 언급 정확한 방법으로 (수

1), 당신은 배경에 템플릿의 부부 설정하고 그에 맞는 하나를로드 사용자 상호 작용에 따라 가장 많음)하지만 심각하게 입력하려고하는 것처럼 들립니다. Spaghetti Code 어떤 것을 유지 관리하기가 매우 어려울 수 있습니다.

2) 성능 : 앱의 성능에 심각하게 영향을 미칠지는 모르겠지만 유지 관리가 훨씬 어려울 것입니다.

3) ng-switch가 맞지 않으면 다른 각도로이 문제를 조사해야합니다.

편집 :

예, 그렇게하는 것이 일반적입니다 : 을 그리고 내가 그 프로젝트의 몇 완료했습니다.

새 .directive의 템플릿 속성에 함수를 전달해야합니다. 예 :이 의미

templateUrl: function (elem, attrs){ 
    return attrs["template"] == "table" ? "tableTemplate.html" : "listTemplate.html"; 
} 

: 당신은 당신의 새로운 지침에 소위 "지원"속성을 추가해야한다는 것입니다. 이 경우 템플릿이라고 부릅니다.

너무과 같습니다 <div new-directive="data" template="table"></div>