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