Angular模板中的Javascript廣告

Question

我正在嘗試在我的Angular模板中呈現Javascript廣告，但它不會顯示。 當我們將Javascript附加到head標簽時我找到了一些解決方案，但我希望將廣告放在我的Html（body body）中。

這是一個Plunker： https ：//plnkr.co/edit/WHhQ95gS5HKSphmmirio

這是一個簡單的簡單Html示例。

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

但是，如果我在Angular模板中添加div，它將無法渲染，控制台也沒有任何內容。

我在這里播放並運行了一些廣告（ http://www.odds.nu/erbjudanden ），但它們是.gif或iframe。 我希望能夠顯示Javascript廣告。 它們被添加到Html中，但不會被渲染（放在頁面底部）。

$ sce或$ compile可以幫助嗎？

我的index.html

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

我的app.js.

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

我的offer.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>

有解決方案嗎

Answer 1

如果您已檢查該網址請求的結果（請確保adBlock已關閉）

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

你會看到實際的結果

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

所以這個文件正在執行document.write ，這顯然不會在angular中工作，只是因為它們完全不同（即使你可能以某種方式觸發摘要周期，你仍然無法修改該腳本文件，因為它是由3rd生成的派對服務器並有自己的變量）

我要做的是 - 創建一個像ad.html這樣的頁面，就像index.html或404.html一樣，然后從angular（不是模板，但像視圖文件）請求這個文件作為帶有自定義屬性的iframe src

我將使用自定義DOM元素，並使用jQuery填充內容，或使用angular，查看下面的jQuery示例

另外我需要krux / postscribe插件，因為你不能在異步html文件中使用document.write

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

而ad.html看起來就像

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

此解決方案的最佳部分是，您可以為任何其他廣告重復使用具有不同url屬性的相同custom元素

結帳jQuery真正的工作演示

雖然這個演示大量使用jQuery，但很容易調整角度版本，我建議你實現作為家庭作業=）

Answer 2

簡短回答：

Angular不會在HTML模板中執行Javascript編譯。 您可以手動將HTML放在頁面中（而不是作為模板加載），或者使用其他方法來調用它。

你可以在這里閱讀更多

Angular模板中的Javascript廣告

問題描述

2 個解決方案

解決方案1
3 已采納 2016-02-24 20:19:26

解決方案2
0 2016-02-01 22:40:37

Angular模板中的Javascript廣告

問題描述

2 個解決方案

解決方案1 3 已采納 2016-02-24 20:19:26

解決方案2 0 2016-02-01 22:40:37

解決方案1
3 已采納 2016-02-24 20:19:26

解決方案2
0 2016-02-01 22:40:37