Comment passer en templateUrl via la portée de la variable dans l'attribut

Je suis en train de passer dans l'url pour le modèle par l'intermédiaire d'une portée variable. Le champ d'application ne changera pas si le modèle n'a pas besoin de mettre à jour basé sur, mais actuellement la portée de la variable est toujours pas défini.

<div cell-item template="{{col.CellTemplate}}"></div>

Idéalement, la directive serait:

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
        return {
            scope: {
                template: '@template'
            },
            templateUrl: template //or {{template}} - either way
        };
    }])

Cela ne fonctionne pas. J'en ai essayé beaucoup de différentes permutations dans l'accomplissement de la même notion, et ce qui semble le plus proche, mais il ne fonctionne toujours pas.

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
        return {
            scope: {
                template: '@template'
            },
            link: function (scope, element, attrs) {
                var templateUrl = $parse(attrs.template)(scope);
                $http.get(templateUrl, { cache: $templateCache }).success(function (tplContent) {
                    element.replaceWith($compile(tplContent)(scope));
                });
            }
        };
    }])

J'ai aussi essayé d'utiliser ng-inclure, mais qui n'a pas d'évaluer la portée des variables avant de les compiler. Le CellTemplate valeur est à venir à partir d'une base de données d'appel est donc totalement inconnues avant l'évaluation. Toutes les suggestions pour l'obtention de ce travail serait grandement apprécié!

Edit:
Je suis en utilisant angulaire 1.0.8 et ne suis pas en mesure de mettre à niveau vers une version plus récente.

OriginalL'auteur John | 2013-10-21

  1. 14

    Vous n'êtes pas loin du tout.

    Vous n'avez pas besoin d'utiliser un isolé champ d'application de la directive. Vous pouvez passer à la templateUrl comme ceci: 

    <div cell-item template="col.CellTemplate"></div>

    Puis ajouter une veille pour détecter lorsque le modèle de changement de la valeur:

    .directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
        return {
            restrict: 'A',
            link: function(scope , element, attrs) {

              scope.$watch(attrs.template, function (value) {
                if (value) {
                  loadTemplate(value);
                }
              });

              function loadTemplate(template) {
                  $http.get(template, { cache: $templateCache })
                    .success(function(templateContent) {
                      element.replaceWith($compile(templateContent)(scope));                
                    });    
              }
            } 
        }
    }]);

    Ici est un travail Plunker: http://plnkr.co/edit/n20Sxq?p=preview

    Qui fonctionne bien lorsque les données sont prédéfinis. Je n'avais pas réalisé que mon problème est que je reçois de mes données à partir d'un service. Si vous définissez les données dans un délai d'expiration dire, ça coince: plnkr.co/modifier/aLkCRm
    Désolé pour le malentendu Jean. J'ai édité ma réponse avec le code mis à jour et une nouvelle Plunker qui fonctionne avec le délai d'attente.
    Qui a fait le tour! merci une tonne
    comment faire u accès dynamique de données ? plnkr.co/modifier/G9VhHD?p=preview voir, j'ai de la portée.dynData qui n'est pas visible sur chargé de modèle
    Tout comme vous avez, il suffit de retirer le $ '$champ d'application.dynData = "bonjour";'

    OriginalL'auteur tasseKATT

  2. 6

    Si vous ne voulez pas avoir affaire avec l'enchaînement logique de vous-même, ou si vous souhaitez isoler portée, je pense que c'est plus simple:

    .directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
        return {
            scope: {
                template: '@template'
            },
            template: "<div ng-include='template'></div>"
        };
    }])

    ou:

    template:"<ng-include src='template'></ng-include>"
    templateUrl est là pour une raison

    OriginalL'auteur npjohns

  3. 1

    C'est un vieux post, mais j'ai pensé utile si quelqu'un les terres ici pour la réponse.

    Vous pouvez essayer le templateUrl fonction @caub mentionné dans un commentaire. Même peut également être utilisé pour les composants.

    .directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
    return {
        templateUrl: function(element, attrs) {
           return attrs.template || 'someDefaultFallback.html';
        }
    };
}]);

    Nous n'avons pas besoin de l'injection de dépendances ici. Espérons que cela aide quelqu'un.

    OriginalL'auteur Vinay