Angular.js 和 Adsense答案

【问题标题】：Angular.js & AdsenseAngular.js 和 Adsense
【发布时间】：2013-06-29 07:31:07
【问题描述】：

我正在尝试在我的 angular.js 应用上投放广告，但我做了一些阅读，发现无法仅复制和粘贴普通的 adsense 代码。

我听说您应该“将其包装在带有嵌入的指令中”，而我能找到的唯一示例是另一个 Stackoverflow 帖子： AngularJs and AddThis social plugin

有人可以提供有关如何使用 Google Adsense 执行此操作的指导吗？

【问题讨论】：

你好大卫，我最近也在学习 Angular。我曾经和这个人 John Lindquist 一起工作（他也在 Papervision 上做了一些工作，这就是我最初听说他的方式）无论如何他有一个网站 egghead.io 专门用于 Angular 教程。查看有关指令的内容，他有几个简短的视频涵盖了它。除此之外，我只会使用文档作为最新的参考。据我了解，基本问题是 Angular 将添加/删除 DOM 元素，如果有 JS 需要处理这些 DOM 元素，则需要将其放入指令中以便运行。

标签： angularjs angularjs-directive adsense transclusion

【解决方案1】：

你需要创建一个指令

yourApp.directive('ads', function() {
    return {
        restrict: 'A',
        templateUrl: 'partiels/adsTpl',
        controller: function(){
            (adsbygoogle = window.adsbygoogle || []).push({});
        }
    };
});

在我的例子中使用您的广告代码创建一个模板“partiels/adsTpl.html”

<ins class="adsbygoogle"
 style="display:inline-block;width:300px;height:250px"
 data-ad-client="ca-pub-00000000"
 data-ad-slot="000000"></ins>

将指令添加到您的页面

 <div data-ads></div>

将 adSense js 调用放在主页的 head 部分，放在 angularjs 之前

<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
....

等等，这对我来说非常适合

【讨论】：

因为我有多个视图和路线，所以它只显示前3次，然后在网站重新加载之前不起作用。
嗨@kode，我的网络应用程序有很多视图，但就我而言，它运行良好，请提供更多详细信息。
谢谢@zied.hosni。我在这里有一个帖子：stackoverflow.com/questions/29709973/… 看来唯一的区别是我的指令使用了 replace: true
您是否将 adsense 指令添加到您的视图中？或者只是到索引页
太棒了！这正是我一直在寻找的，它很简单并且与 AngularJs 配合得很好！

【解决方案2】：

您应该像这样对 adSense 脚本执行包装指令...

<div data-my-ad-sense>
  <!-- Google AdSense -->
  <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <ins class="adsbygoogle"
       style="display:inline-block;width:728px;height:90px"
       data-ad-client="ca-pub-0000000000"
       data-ad-slot="0000000000"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

并将此指令添加到您的指令中...

directive('myAdSense', function() {
  return {
    restrict: 'A',
    transclude: true,
    replace: true,
    template: '<div ng-transclude></div>',
    link: function ($scope, element, attrs) {}
  }
})

这是 adSense 异步代码。

【讨论】：

这似乎不起作用，我的广告显示为空白（但奇怪的是仍然加载了 iframe）。有任何想法吗？我在 ng-repeat 中使用它们，其中每个第 4 个元素都有一个广告。如果有帮助，你可以在 sparkmyinterest.com 上看到它
此解决方案似乎有效，但是当 ng-view 更改时，如果在 ng-repeat 中打印多个 ADS：我第一次查看视图：OK（或者有时一个或缺少更多 ADS），但更改视图并返回一些（或全部）ADS 丢失
这不是一个好的解决方案。指令包装器完全没有任何作用。只是说
data-my-ad-sense 来自哪里？
@JohnAndrews data- 部分只是指定了一个自定义 html5 属性（允许您的 html 进行验证）。 my-ad-sense 部分是第二个 sn-p 中定义的指令的名称。

【解决方案3】：

我不确定按照 adsense 条款执行以下操作是否有效。

在更改 url 之前删除所有与 google 相关的变量

Object.keys(window).filter(function(k) { return /google/.test(k) }).forEach(
        function(key) {
            delete(window[key]);
        }
    );

【讨论】：

【解决方案4】：

在AngularJS控制器中，添加init()函数，添加一行

(adsbygoogle = window.adsbygoogle || []).push({});

然后在你的视图 html 文件中调用这个init() 函数。

另请参阅
https://github.com/featen/ags/blob/master/webapp/js/controllers/dict.js

【讨论】：