AngularJS - custom directive with attributes in templateUrl

Question

I have some templates for format text, frecuencia-dia.html or frecuencia-mes.html for example.

I want call a dinamic template using the attributes tipo (text plain) and clave (variable scope).

<ng-formato-texto tipo="frecuencia" clave="{{prod.claveFrecuencia}}" />

app.directive('ngFormatoTexto', function() {
    return {
        templateUrl: function(elem, attr){
            return '/formats/'+attr.tipo+'-'+attr.clave+'.html';
        }
    };
});

But don't work, this try load frecuencia-%7B%7Bprod.clavePrueba%7D%7D.html

What error are you getting? Can you put the plunkr? docs.angularjs.org/guide/directive — Gary
– Gary, Commented Mar 14, 2016 at 9:32

Stepan Kasyanenko · Accepted Answer · 2016-03-14 10:04:09Z

2

You can not use the dynamic template in directive.

As documentation say:

Note: You do not currently have the ability to access scope variables from the templateUrl function, since the template is requested before the scope is initialized.

To create a dynamic directive can use ng-include.

Example:

app.directive('ngFormatoTexto', function() {
 return {
     template: '<div ng-include="path"></div>',
     scope:{
       tipo:"@",
       clave:"="
     },
     link:function(scope){
       scope.path= '/formats/'+scope.tipo+'-'+scope.clave+'.html'
     }
 };
});

answered Mar 14, 2016 at 10:04

Stepan Kasyanenko

3,1761 gold badge17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - custom directive with attributes in templateUrl

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related