AngularJS는 내부의 루프 안에서 템플릿을 렌더링합니다.

Question

나는 부분 안에 지시어 안에 컴파일 된 HMTL-as-a-string을 사용하여 반복문을 묶어주는 지시어를 가지고 있습니다. 이 HTML-as-a-string 자체는 렌더링하지 않는 ng-include을 포함합니다.

나의 jsfiddle example

기본적으로,이 template2.html를 포함하지 않는 참조하십시오

element.html('<span>The name is ' + scope.content.name + '!</span><div ng-include src="template2.html"></div><br>'); 

모든 포인터가 많이 주시면 감사하겠습니다.

감사합니다.

Answer 1

WORKING DEMO

단지 DOCS에

src=" \'template2.html\'" 


var linker = function(scope, element, attrs) { 
    element.html('<span>The name is ' + scope.content.name + '!</span><div ng-include src=" \'template2.html\'"></div><br>'); 
    $compile(element.contents())(scope); 
}; 

대한 추가 정보를 같이 쓸 필요

Answer 2

내가 대신 실제 템플릿을 사용하는 것이 좋습니다 것이지만 (src="\'template2.html\'"와 src="template2.html" 교체) 위의 비 노드의 대답은 정확 링크 함수 내에서 수동으로 템플릿을 컴파일하는 방법. 귀하의 예에서는 실제로 양방향 바인딩의 이점을 얻지 못합니다. 당신은 단지 컴파일 함수의 html 출력을 취하고 있으며 기본 데이터가 변경되면 결코 업데이트되지 않습니다. 당신이 체크 박스의 값을 변경하는 경우, 지시어의 값이 변경되지 않는 방법

http://jsfiddle.net/kf3vZ/5/

주의 : 여기에 바인딩 (그리고 비 노드의 템플릿 수정)를 표시하도록 수정하여 예입니다. 사용자가 텍스트 필드를 변경하는 경우, 지시어의 값도 변경됩니다 이제

http://jsfiddle.net/kf3vZ/7/

:

지금 여기 지시에 template 인수를 사용하여 버전입니다.

또 다른 노트, 이미 템플릿에 대한 script 태그를 사용하고 있기 때문에, 당신은 templateUrl 당신의 지시에 template을 교체하고 스크립트 템플릿의 id을 제공 할 수있다.