Come posso emettere un tag di script memorizzato come una stringa nel mio scopo a un modello di AngularJS?

Question

Ho bisogno di utilizzare uno script incorporato nei miei modelli, ma inserire dinamicamente un percorso su un'immagine prima che venga eseguito lo script.

Ho scritto una direttiva per costruire il percorso dell'immagine come variabile di ambito, quindi utilizzare $interpolate per inserire questo nel tag <script>.

Il riferimento ora memorizzato (come stringa) in $scope.tag è il codice che vorrei essere iniettato e interpretato / eseguire come tag script.

Invece, tuttavia il tag script viene aggiunto come una stringa nel mio modello e non riesco a sembrare ad allenarti quale fase supplementare dovrei prendere per emettere effettivamente la stringa del tag script come tag script.

Ecco il modello (indicato nella direttiva come templateUrl):

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

.

Direttiva:

'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) {}
    };
  });

.

Per riferimento, a questo punto la variabile $scope.tag conterrà una stringa di:

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

.

Answer 1

Sembra che:

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

.

Lavori che utilizza JQuery per aggiungere il tag script all'elemento della direttiva.