angularjs - files - Usando $ compile en plantilla externa(templateURL) en directiva Angular

import js angularjs

Question

Tengo una directiva angular recursiva que usa una variable de plantilla y se compila en la función de link .

El problema es que mi plantilla se ha vuelto realmente larga y está fuera de control, y quiero externalizarla en un archivo HTML externo (también lo haría más fácil, por ejemplo, para el autoguiado).

¿Cómo se puede cargar una plantilla externa en una directiva que se puede usar dentro de $compile ?

He visto templateURL , pero eso no me permite nombrar la variable y pasarla a la función $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);
        }
}

y

Answer 1

Prefiero usar $ http para cargar la plantilla si su tamaño es mayor: -

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

Answer 2

Puede usar el servicio $templateRequest para obtener la plantilla. Este es un servicio de conveniencia que también almacena en caché la plantilla en $templateCache , por lo que solo se realiza una solicitud a template.html .

Como ilustración (y sin entrar en el tema de las directivas recursivas), esto se usa así:

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

plunker (consulte la pestaña de red para ver una solicitud de red única)