Geek Answers Handbook

Javascript Ads in Angular Templates

I am trying to make a Javascript declaration in my Angular template but it will not appear. I found some solutions by adding Javascript to the main tag, but I want the ad to be placed in my Html (inside the body).

Here is the plunker: https://plnkr.co/edit/WHhQ95gS5HKSphmmirio

Here is a simple Html example that works.

<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>

But if I add a div inside the Angular template, it will not be displayed and the console will not say anything.

I have some ads here too ( http://www.odds.nu/erbjudanden ), but they are either .gif or iframes. Instead, I want to show Javascript ads. They are added to the HTML, but not displayed (placed at the bottom of the page).

Can $ sce or $ compile help?

My index.html

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

My app.js

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

My suggestions .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>

Any solution?

+7
javascript angularjs ads angular-template
source share
2 answers

If you checked the result of the url request (make sure adBlock is off)

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

You will see the actual result.

 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

Thus, this file executes document.write , which obviously will not work in angular, simply because it is completely different (although you can somehow call the digest loop, you still do not have access to modify this script file generated by a third-party server and has its own variables)

What would I do - create a page like ad.html like index.html or 404.html, then request this file from angular (not as a template, but as a view file) as an iframe src with custom attributes

And I would use a custom DOM element and populate the content with jQuery or with angular, looking at the jQuery sample below

I will also need the krux / postscribe plugin because 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 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>

And ad.html will look like

 <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>

The best part of this solution is that you can reuse the same user element with a different url attribute for any other ads

Checkout jQuery real working demo

Although this demo uses jQuery heavily, it is easy to configure for the angular version that I suggest you do as homework =)

+3
source share

Short answer:

Angular does not compile Javascript in HTML templates. You either put the HTML manually on the page (instead of loading it as a template), or you have another way to call it.

Here you can read

0
source share

More articles:


All Articles