Comment puis-je sortie d'une balise de script est stocké comme une chaîne de caractères dans mon champ d'action à un AngularJS modèle?

Question

J'ai besoin d'utiliser un script incorporé dans mes modèles, mais insérer dynamiquement un chemin vers une image avant l'exécution du script.

J'ai écrit une directive pour construire le chemin de l'image comme une étendue variable, puis utilisez $interpolate pour insérer ceci dans le <script> la balise.

La référence désormais stockées (comme une chaîne de caractères) dans $scope.tag c'est le code que je voudrais être injecté et interprété/exécuter en tant qu'une balise de script serait.

Au lieu de cela cependant, la balise script est ajouté comme une chaîne de caractères dans mon template et je n'arrive pas à la séance d'entraînement de ce que l'étape supplémentaire, j'aurais besoin de prendre réellement la sortie de la balise de script chaîne comme une balise de script.

Voici le modèle (visée dans la directive comme l' templateUrl):

<div>
  {{ tag }}
</div>

Directive:

'use strict';

angular.module('App')
  .directive('sslLogo', function($location, $interpolate) {
    return {
      replace: false,
      restrict: 'AE',
      templateUrl: '/views/partials/ssl-logo.html',
      controller: function($scope, $element, $attrs) {
        // Outputs the full base url (http:// ... .com/ )
        var base_url = '';
            base_url += $location.protocol() + '://';
            base_url += $location.host();

            if ( $location.port() ) {
              base_url += ':' + $location.port();
            }

        // Add the path to the image asset.
        $scope.logo_url = base_url + "/images/static/comodo-wildcardssl.png";

        // Interpolate this path into the script tag and then store the script tag to be output to the template.
        $scope.tag = $interpolate('<script type="text/javascript">TrustLogo("{{ logo_url }}", "SCCC", "none");</script>', false, true)({ logo_url: $scope.logo_url });
      },
      link: function(scope, element, attrs) {}
    };
  });

Pour référence, à ce stade, l' $scope.tag variable contiendra une chaîne de:

<script type="text/javascript">TrustLogo("http://localhost:9000/images/static/comodo-wildcardssl.png", "SCCC", "none");</script>

Answer 1

Il semble que:

...
link: function(scope, element, attrs) {
  element.append( scope.tag );
}
...

des œuvres qui utilise jQuery pour ajouter la balise de script à la directive de l'élément.