Modelo dynamic da diretiva Angular.jsURL

Eu tenho uma tag personalizada em um modelo routeProvider que solicita um modelo de directive . O atributo de version será preenchido pelo escopo, que então chama o modelo correto.

  

Existem várias versões do hino com base no que semana e dia é. Eu estava prevendo usar a diretiva para preencher a parte correta .html . A variável não está sendo lida pelo 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 } }); 

Existem vários arquivos no diretório de trechos que são rotulados before-1-monday.html , before-2-tuesday.html ,…

Você pode usar ng-include diretiva ng-include .

Tente algo assim:

 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' } } }); 

Então você pode fornecer templateUrl via marcação

  

Agora você apenas cuida que a propriedade contentUrl preencha com o caminho gerado dinamicamente.

Graças a @pgregory, eu poderia resolver meu problema usando esta diretiva para edição inline

 .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); } } })

Você não precisa de diretivas personalizadas aqui. Apenas use o atributo ng-include src. É compilado para que você possa colocar o código dentro dele. Veja plunker com solução para o seu problema.

 

Eu tive o mesmo problema e resolvi de uma maneira um pouco diferente das outras. Eu estou usando 1.4.4 angular.

No meu caso, eu tenho um modelo de shell que cria um painel CSS Bootstrap:

 

{{title}}

Eu quero include modelos de corpo do painel, dependendo da rota.

  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)); } } }]); 

Eu então tenho o seguinte modelo incluído quando a rota é #/students :

 

O template panel-body.html da seguinte forma:

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

Dados de amostra no caso de alguém querer ir:

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

Eu tenho um exemplo sobre isso.

       

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: '
' } })