Angularjs: eseguire javascript dentro una vista parziale

Nell’articolo di oggi vediamo come eseguire uno script javascript dentro una vista parziale di AngularJs

NOTA: Questo articolo si riferisce ad Angularjs 1.x.x

Come tutti coloro che si avvicinano ad Angularjs anche io mi sono presto imbattuto in un particolare problema:

“Perchè i file js dentro le viste parziali non vengono eseguite?”

Di fatto il workflow di Angular richiama per ogni richiesta di routing la pagina index.html a cui viene poi “innestato” dinamicamente a seconda dell’url un template parziale. L’inserimento avviene però in modo asincrono pertanto si ha la necessità, nel caso inseriate script js, di eseguire un comando di esecuzione una volta caricata la vista parziale.

Apriamo il Controller.js e inseriamo una direttiva come segue:

app.directive('script', function() {
    return {
      restrict: 'E',
      scope: false,
      link: function(scope, elem, attr) 
      {
        if (attr.type==='text/javascript-lazy') 
        {
          var s = document.createElement("script");
          s.type = "text/javascript";                
          var src = elem.attr('src');
          if(src!==undefined)
          {
              s.src = src;
          }
          else
          {
              var code = elem.text();
              s.text = code;
          }
          document.head.appendChild(s);
          elem.remove();
        }
      }
    };
  })

NOTA: “app” all’inizio del codice è la variabile contenente il declare della vostra applicazione angular, se non sapete dove mettere le mani e siete ai primi passi eliminate il primo app dal codice sopra-riportato e inserite il code tra un controller e l’altro della vostra applicazione.

A questo punto grazie alla nostra direttiva ci basterà cambiare dentro le viste parziali – all’interno dei nostri file js  – da text/javascript a text/javascript-lazy in questo modo:

<script type="text/javascript-lazy">
//Eseguo dentro la vista
alert("W Targetweb!");
</script>

Fatto ciò vedrete che il vostro js sarà correttamente elaborato.

E’ importante far notare che eventuali librerie NON vanno caricate nelle viste parziali in questo modo, bensì vanno lasciate dentro il file “matrice” index.html.

Documentazione direttive

Questo articolo ti è servito? Fammelo sapere nei commenti qui sotto!