Angular.js directive dynamic templateURL

Tengo una etiqueta personalizada en una plantilla routeProvider que llama para una plantilla de directive . El atributo de version se completará con el scope que luego llamará a la plantilla correcta.

  

Hay varias versiones del himno basadas en qué semana y día es. Estaba anticipando usar la directiva para llenar la porción .html correcta. La variable no está siendo leída por la templateUrl .

 emanuel.directive('hymn', function() { var contentUrl; return { restrict: 'E', link: function(scope, element, attrs) { // concatenating the directory to the ver attr to select the correct excerpt for the day contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html'; }, // passing in contentUrl variable templateUrl: contentUrl } }); 

Hay varios archivos en el directorio de extractos etiquetados before-1-monday.html , before-2-tuesday.html , …

Puede usar la directiva ng-include .

Pruebe algo como esto:

 emanuel.directive('hymn', function() { return { restrict: 'E', link: function(scope, element, attrs) { scope.getContentUrl = function() { return 'content/excerpts/hymn-' + attrs.ver + '.html'; } }, template: '
' } });

UPD. para ver atributo ver

 emanuel.directive('hymn', function() { return { restrict: 'E', link: function(scope, element, attrs) { scope.contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html'; attrs.$observe("ver",function(v){ scope.contentUrl = 'content/excerpts/hymn-' + v + '.html'; }); }, template: '
' } });
 emanuel.directive('hymn', function() { return { restrict: 'E', link: function(scope, element, attrs) { // some ode }, templateUrl: function(elem,attrs) { return attrs.templateUrl || 'some/path/default.html' } } }); 

Para que pueda proporcionar templateUrl a través de marcado

  

Ahora solo tiene cuidado de que la propiedad contentUrl se complete con la ruta generada dinámicamente.

Gracias a @pgregory, pude resolver mi problema usando esta directiva para la edición en línea

 .directive("superEdit", function($compile){ return{ link: function(scope, element, attrs){ var colName = attrs["superEdit"]; alert(colName); scope.getContentUrl = function() { if (colName == 'Something') { return 'app/correction/templates/lov-edit.html'; }else { return 'app/correction/templates/simple-edit.html'; } } var template = '
'; var linkFn = $compile(template); var content = linkFn(scope); element.append(content); } } })

No necesita una directiva personalizada aquí. Solo use el atributo ng-include src. Está comstackdo para que puedas poner el código dentro. Ver plunker con solución para su problema.

 

Tuve el mismo problema y lo resolví de una manera ligeramente diferente a las demás. Estoy usando angular 1.4.4.

En mi caso, tengo una plantilla de shell que crea un panel CSS Bootstrap:

 

{{title}}

Quiero incluir plantillas de cuerpo de panel dependiendo de la ruta.

  angular.module('MyApp') .directive('spPanelBody', ['$compile', function($compile){ return { restrict : 'E', scope : true, link: function (scope, element, attrs) { scope.data = angular.fromJson(scope.data); element.append($compile('')(scope)); } } }]); 

Luego tengo la siguiente plantilla incluida cuando la ruta es #/students :

 

La plantilla panel-cuerpo.html de la siguiente manera:

 Date of Birth: {{data.dob * 1000 | date : 'dd MMM yyyy'}} 

Datos de muestra en el caso de que alguien quiera probar:

 var student = { 'id' : 1, 'firstName' : 'John', 'middleName' : '', 'lastName' : 'Smith', 'dob' : 1130799600, 'current-class' : 5 } 

Tengo un ejemplo sobre esto.

 < !DOCTYPE html>      

Register Form


 angular.module('app', []) .controller('formView', function ($scope) { $scope.elements = [{ "Id":1, "Type":"textbox", "FormId":24, "Label":"Name", "PlaceHolder":"Place Holder Text", "Max":20, "Required":false, "Options":null, "SelectedOption":null }, { "Id":2, "Type":"textarea", "FormId":24, "Label":"AD2", "PlaceHolder":"Place Holder Text", "Max":20, "Required":true, "Options":null, "SelectedOption":null }]; }) .directive('element', function () { return { restrict: 'E', link: function (scope, element, attrs) { scope.contentUrl = attrs.type + '.html'; attrs.$observe("ver", function (v) { scope.contentUrl = v + '.html'; }); }, template: '
' } })