Javascript 个广告在 Angular 个模板中

Question

我正在尝试在我的 Angular 模板中呈现 Javascript 广告，但它不会显示。当他们将 Javascript 附加到 head 标签时，我找到了一些解决方案，但我希望将广告放置在我的 Html（正文内）中。

这是一个笨蛋：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"
    });

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

有什么解决办法吗？

Answer 1

简答：

Angular 不会在 HTML 模板中执行 Javascript 的编译。您要么将 HTML 手动放入页面（而不是作为模板加载），要么通过其他方式调用它。

你可以阅读更多here

Answer 2

如果您检查了 url 请求的结果（确保 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 中工作，只是因为它们完全不同（即使你可以以某种方式触发摘要循环，你仍然没有访问权限修改该脚本文件，因为它由第 3 方服务器生成并具有自己的变量）

我会做的是 - 制作一个像 ad.html 的页面，就像 index.html 或 404.html，然后从 angular 请求这个文件（不是模板，但就像视图文件一样）作为具有自定义属性的 iframe src

我会使用自定义 DOM 元素，并使用 jQuery 或 angular 填充内容，请查看下面的 jQuery 示例

我还需要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'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 属性的相同自定义元素

Checkout jQuery real working demo

尽管此演示大量使用了 jQuery，但很容易针对 angular 版本进行调整，我建议您将其作为作业实现 =)

Javascript 个广告在 Angular 个模板中

Javascript ads in Angular templates

javascript

ads

angularjs

angular-template