외부 템플릿에서 $compile 사용(템플릿)URL)의 각도 지시어

외부 템플릿에서 $compile 사용(템플릿)URL)의 각도 지시어

템플릿 변수를 사용하여 컴파일되는 재귀적 각도 지시문이 있습니다.link기능.

문제는 템플릿이 너무 길어져 제어할 수 없게 되어 외부 HTML 파일로 외부화하고 싶다는 것입니다(예를 들어 자동인디트도 쉬워집니다).

외부 템플릿을 명령어로 로드하려면 어떻게 해야 합니까?$compile?

본 적이 있다templateURL단, 변수 이름을 붙이고 이 변수를 전달하지 않습니다.$compile기능.

var template = 
           "<p>My template</p>"+
           "<this-directive val='pass-value'></this-directive>";

return {
     scope: {
     ...
     },
     ...
     link: function(scope, element){
            element.html(template);
            $compile(element.contents())(scope);
        }
}

그리고.

를 사용할 수 있습니다.$templateRequestservice를 사용하여 템플릿을 가져옵니다.이것은 템플릿도 캐시하는 편리한 서비스입니다.$templateCache1개의 요구만 실행할 수 있도록 합니다.template.html만들어졌다.

예시로서 (재귀 지시어에 대한 문제를 다루지 않고) 다음과 같이 사용됩니다.

link: function(scope, element){
   $templateRequest("template.html").then(function(html){
      var template = angular.element(html);
      element.append(template);
      $compile(template)(scope);
   });
};

plunker(단일 네트워크 요구를 표시하려면 [Network]탭을 체크합니다)

템플릿의 사이즈가 클 경우 $http를 사용하여 로드하는 것이 좋습니다.-

$http.get('mytemp.html').then(function(response) {
            element.html(response.data);
            $compile(element.contents())(scope);
            });

언급URL : https://stackoverflow.com/questions/28854303/using-compile-on-external-template-templateurl-in-angular-directive