7

我正在尝试在 AngularJS 应用程序中使用 AddThis javascript Social 插件，但是当我使用 ng-view 加载部分时，它不会更新 addthis 插件图标。如果我刷新它的页面 (ctrl+F5) 。我认为 AngularJs 通过 Ajax 加载部分视图，在这种情况下 addthis 不会显示加载页面的社交图标。

这是索引代码：

<header>
       .....
</header>
<div>
     <section id="content" ng-view></section>
</div>
<footer id="footer" ng-controller="footerCtrl">
     ...
</footer>

这是在部分标签中加载的部分视图，其中我有 addthis 图标：

<div class="ad-col" >
        <p ng-bind-html-unsafe="homeContent.promo.entradilla"></p>
        <br />
        <br />
        <!-- AddThis Button BEGIN -->
        <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
            <a class="addthis_button_facebook"></a>
            <a class="addthis_button_twitter"></a>
            <a class="addthis_button_linkedin"></a>
            <a class="addthis_button_google_plusone_badge"></a>
            <a class="addthis_button_pinterest_pinit"></a>
            <a class="addthis_button_compact"></a>
            <a class="addthis_counter addthis_bubble_style"></a>
        </div>
        <!-- AddThis Button END -->
    </div>

当然，我在主页中有脚本参考 fot AddThis：

<script type="text/javascript">var addthis_config = { "data_track_addressbar": true };</script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5113c1e01aaacb3f"></script>

我在 angularJs 参考之前有 jquery 脚本参考：

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

提前致谢。

4

6 回答 6

10

我创建了简单的 AngularJS 指令来刷新在动态包含的部分中定义的 AddThis 工具箱

angular.module('Directive.AddThis', [])

/**
 * AddThis widget directive
 *
 * Usage:
 *   1. include `addthis_widget.js` in header with async=1 parameter
 *   <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<pubid>&async=1"></script>
 *   http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-url
 *   2. add "addthis-toolbox" directive to a widget's toolbox div
 *   <div addthis-toolbox class="addthis_toolbox addthis_default_style addthis_32x32_style">
 *     ...       ^
 *   </div>
 */
.directive('addthisToolbox', function() {
    return {
        restrict: 'A',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>',
        link: function ($scope, element, attrs) {
            // Dynamically init for performance reason
            // Safe for multiple calls, only first call will be processed (loaded css/images, popup injected)
            // http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-url
            // http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performance
            addthis.init();
            // Ajax load (bind events)
            // http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#rendering-js-toolbox
            // http://support.addthis.com/customer/portal/questions/548551-help-on-call-back-using-ajax-i-lose-share-buttons
            addthis.toolbox($(element).get());
        }
    }
});

使用示例：

<html>
<head>
    <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<my-pubid>&async=1"></script>
</head>
<body>

  <!-- AddThis Button BEGIN -->
  <div addthis-toolbox class="addthis_toolbox addthis_default_style addthis_32x32_style">
      <a class="addthis_button_facebook"></a>
      <a class="addthis_button_twitter"></a>
      <a class="addthis_button_google_plusone_share"></a>
      <a class="addthis_button_compact"></a>
      <a class="addthis_counter addthis_bubble_style"></a>
      <script type="text/javascript">var addthis_config = { "data_track_clickback": false, "data_track_addressbar":false };</script>
  </div>
  <!-- AddThis Button END -->

</body>
</html>

addthis 站点的默认小部件代码也应该可以工作，只需删除&async=1和addthis.init().

您可以使用类似的方法来控制其他 addThis 函数，例如addthis.button()等addthis.counter()。

于 2013-05-20T16:32:43.023 回答
8

如果您使用的是新的 AddThis 仪表板配置，那么您只需将addthis.layers.refresh()（参见： http: //www.addthis.com/academy/using-dashboard-configuration-tools-dynamically/）包装在指令中并添加到您的 div。

.directive('addthisToolbox', function() {
    return {
        restrict: 'A',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>',
        link: function ($scope, element, attrs) {
            // Checks if addthis is loaded yet (initial page load)
            if (addthis.layers.refresh) {
               addthis.layers.refresh();
            }
        }
    };
});

HTML： <div addthis-toolbox class="addthis_sharing_toolbox"></div>

于 2015-02-24T11:53:03.583 回答
2

@antonpinchuk 的解决方案对我来说效果很好，它只是没有更新计数器......我在指令的末尾添加了以下行，现在一切都像一个魅力:)

addthis.counter($(element).children('.addthis_counter').get());
于 2014-09-09T11:45:15.047 回答
2

想为 atonpinchuk 的答案添加一点。我们在应用程序中遇到的一个问题是，我们在各个页面上都有 addthis 按钮，并且希望 url 和标题因页面而异。我们有一个更新元标记的服务，但是因为 addthis 是使用我们主模板中的脚本启动的，所以 addthis 没有选择我们更改的元标记。

我们的解决方案是在我们的指令中使用共享配置，如下所述：http: //support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-sharing

这样 addthis 会选择正确的 url 和标题。当然，如果你想完全模仿非客户端网站的社交分享功能，这只是成功的一半。您还需要编写自己的服务来更新头部的标签。然后你需要使用 phantomJS 来创建你网站的静态版本，并将 google、facebook 和其他爬虫重定向到它。

我们遇到的一个问题是按钮由于某种原因无法在 IE8 中呈现。还没想出解决办法。奇怪的是，如果您addthis.init()通过 HTML 在脚本标签中调用它，它会起作用，但这不适用于 SPA。也addthis.init()可用（即!!addthis.init() == true在指令中，所以我不确定它有什么问题。

于 2013-10-14T19:48:02.157 回答
1

尝试：

`<script type="text/javascript">
    //always refresh on URL change
    window.addEventListener("hashchange", function () {
      addthis.layers.refresh();
    });
</script>`

在调用下一个方法后，在您的 angular 指令或控制器 inyect de$window对象中：$window.addthis.layers.refresh();

于 2016-03-16T00:24:39.917 回答
0

您可能需要将添加此脚本的脚本标记引用放在您的部分中。那将是最简单的解决方法。

发生的事情是在它们运行时，部分还没有加载，所以它们不会影响任何东西。

于 2013-03-24T00:21:37.403 回答