Annunci Javascript in modelli angolari

Sto provando a visualizzare un annuncio Javascript nel mio modello Angolare ma non verrà visualizzato. Ho trovato alcune soluzioni quando aggiungono il Javascript al tag head ma voglio che l'annuncio sia inserito nel mio Html (all'interno del corpo).Annunci Javascript in modelli angolari

Ecco un Plunker: https://plnkr.co/edit/WHhQ95gS5HKSphmmirio

Ecco un semplice esempio semplice HTML che funziona.

<html> 
    <head> 
    </head> 
    <body> 
    <div class="ad"> 
     <script src="http://media.affiliatelounge.com/data/nordicbet/ad_js/display_88.js?ad=ad_793270_88.html&amp;size=300x250&amp;clicktag=http://record.affiliatelounge.com/_sVuSoFFh4LK58VwA2IUESrKVVrME-Gsw/1&amp;media=108786&amp;campaign=1"></script> 
    </div> 
    </body> 
    </html>

Ma se aggiungo il div all'interno di un modello Angolare non verrà visualizzato e la console non dice nulla.

Ho alcuni annunci attivi e funzionanti qui (http://www.odds.nu/erbjudanden), ma sono o .gif o iframe. Voglio essere in grado di mostrare invece gli annunci Javascript. Vengono aggiunti all'Html ma non vengono renderizzati (posizionati nella parte inferiore della pagina).

Può $ sce o $ compilare in qualche modo?

mio index.html

<div data-ng-view="" class="mainView"></div>

miei app.js

$routeProvider.when("/erbjudanden", { 
      controller: "offerController", 
      templateUrl: "/app/templates/offers.html" 
    });

mio offers.html

<div class="ad"> 
     <script src="http://media.affiliatelounge.com/data/nordicbet/ad_js/display_88.js?ad=ad_793270_88.html&amp;size=300x250&amp;clicktag=http://record.affiliatelounge.com/_sVuSoFFh4LK58VwA2IUESrKVVrME-Gsw/1&amp;media=108786&amp;campaign=1"></script> 
    </div>

qualche soluzione?

fonte

2016-02-01 Kungen

Cosa fa quello script fare? – Voreny

@Voreny Carica "un'immagine" fondamentalmente con un collegamento. Non ha pubblicato la fonte corretta poiché è irrilevante. – Kungen

il codice sorgente dello script è completamente pertinente –

Se tu avessi ispezionato risultato di tale richiesta URL (assicurarsi AdBlock è spento)

https://wlbetclic.adsrv.eacdn.com/S.ashx?btag=a_17172b_14837c_&affid=12824&siteid=17172&adid=14837&c=

Vedrete il risultato effettivo

document.write('<script type="text/javascript" src="//wlbetclic.eacdn.com/TrafficOpt/s.5.4.min.js?t=1"></script>'); 
document.write('<script type="text/javascript" src="//wlbetclic.eacdn.com/wlbetclic/img/js/Affiliate_12824.js?t=20160224"></script>'); 
//other lines omitted for brevity

Così questo file sta eseguendo document.write che ovviamente non funzionerà in modo angolare, solo perché sono totalmente diversi (anche se potresti attivare le cifre t ciclo in qualche modo, non hai ancora accesso per modificare quel file di script, poiché è generato da server di terze parti e ha variabili proprie)

Quello che vorrei fare è - creare una pagina come ad.html, proprio come l'indice .html o 404.html, quindi richiedere questo file da angolare (non come modello, ma come un file di visualizzazione) come src iframe con attributi personalizzati

E vorrei utilizzare l'elemento DOM personalizzato e popolare i contenuti con jQuery, oppure con angolare, guardo jQuery esempio riportato di seguito

Inoltre avrei bisogno krux/postscribe plug-in, perché you cannot use document.write in async html files

<!-- create multiple holders --> 
<ad-holder url="https://wlbetclic.adsrv.eacdn.com/S.ashx?btag=a_17172b_14837c_&affid=12824&siteid=17172&adid=14837&c="></ad-holder> 

<div class="black-widow"> 
    <!-- with size attributes --> 
    <ad-holder url="http://google.com" width="100" height="40"></ad-holder> 
</div> 

<!-- jQuery population with iframe --> 
<script> 
    //get all custom elements 
    $('ad-holder').each(function(){ 

     //create iframe placeholder 
     var $iframe = $(document.createElement('iframe')); 

     //get url of custom element 
     var url = $(this).attr('url'); 

     //request ad.html file with params, currently it's url param 
     $iframe.attr('src', 'ad.html?url=' + url); 

     //some stylings acceptable here 
     $iframe.width('100px'); 

     //or get styles from custom-element 
     var heightValue = $(this).attr('height'); 
     $iframe.height(heightValue || '50px'); 

     //rebuild custom element with iframe 
     $(this).append($iframe); 
    }); 
</script> 

<!-- angular populate with iframe directive --> 
<scrip> 
    angular.module('app', []).directive('adHolder', function(){ 
     return { 
      restrict: 'E', 
      scope: { url: '@' }, 
      //you could also execute in compile-phase 
      link: function(scope, element, attribute){ 
       var $iframe = angular.element(document.createElement('iframe')); 
       $iframe.attr('src', 'ad.html?url=' + scope.url); 
       element.html($iframe); 
      } 
     } 
    }); 
</script>

E annuncio.html sarà simile

<body> 
    <div id="ad"></div> 
    <script> 
    function getQueryVariable(variable) { 
     var query = window.location.search.substring(1); 
     //for the sake of simplicity we expect only 1 param (url) 
     return query.replace('url=', ''); 
    } 
    var adUrl = getQueryVariable('url'); 
    if (adUrl) 
     postscribe('#ad', '<script src="' + adUrl + '"><\/script>'); 
    else { 
     var $h1 = $(document.createElement('h1')); 
     $h1.text('No ad available'); 
     $(document.body).append($h1); 
    } 
    </script> 
</body>

La parte migliore di questa soluzione è che si può riutilizzare stessa misura elemento con diversi attributi url per tutti gli altri annunci

Checkout jQuery real working demo

Anche se questa demo utilizza pesantemente jQuery , è facile da modificare per la versione angolare, che vorrei suggerire di implementare come compito a casa =)

fonte

2016-02-24 20:19:26

Grazie, è fantastico. Non l'ho ancora provato, ma credo che ti meriti comunque la taglia. Saluti! – Kungen

Risposta breve:

angolare non esegue la compilazione di javascript nel template HTML. Metti l'HTML manualmente nella pagina (invece di caricare come modello) o hai un altro modo di chiamarlo.

Si può leggere di più here

fonte

2016-02-01 22:40:37

Cosa intendi con "manualmente nella pagina"? Nel mio file di indice? – Kungen

E ho anche caricato Jquery prima di Angular, ancora non esegue il rendering. – Kungen

Se si inserisce un tag script in un modello html angolare, non verrà compilato: ergo, non verrà eseguito. Non inserire tag di script nei modelli –

Annunci Javascript in modelli angolari

risposta

Problemi correlati