Plantilla URL dinámica de la directiva Angular.js

Tengo una etiqueta personalizada en una routeProviderplantilla que requiere una directiveplantilla. El versionatributo se completará con el alcance que luego solicitará la plantilla correcta.

<hymn ver="before-{{ week }}-{{ day }}"></hymn>

Hay varias versiones del himno según la semana y el día que sea. Estaba anticipando usar la directiva para completar la .htmlporción correcta. La variable no está siendo leída por 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 que están etiquetados before-1-monday.html,, before-2-tuesday.html…

Feb 18 '14 00:02 Alen Giliana

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 mediante marcado

<hymn template-url="contentUrl"><hymn>

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

Jun 02 '2014 16:06 Andrej Kaurin

Puedes usar ng-includela directiva.

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: '<div ng-include="getContentUrl()"></div>'
   }
});

UPD. para ver verel atributo

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: '<div ng-include="contentUrl"></div>'
   }
});

Feb 17 '2014 17:02 pgregory

Gracias a @pgregory, pude resolver mi problema usando esta directiva para 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 = '<div ng-include="getContentUrl()"></div>';

            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);
        }
    }
})

May 19 '2015 08:05 Shilan

No necesita una directiva personalizada aquí. Simplemente use el atributo ng-include src. Está compilado para que puedas poner código dentro. Consulte plunker con la solución a su problema.

<div ng-repeat="week in [1,2]">
  <div ng-repeat="day in ['monday', 'tuesday']">
    <ng-include src="'content/before-'+ week + '-' + day + '.html'"></ng-include>
  </div>
</div>

Jun 01 '2015 19:06 icem