7

AngularJSアプリでAddThisjavascriptSocialプラグインを使用しようとしていますが、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>

もちろん、ホームページに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

動的に含まれるパーシャル内で定義されたAddThisツールボックスを更新するための単純なAngularJSディレクティブを作成しました

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

atonpinchukによる回答に追加のポイントを追加したかった。アプリで発生した問題は、さまざまなページにaddthisボタンがあり、ページによってURLとタイトルを変えたいということでした。メタタグを更新するサービスがありますが、addthisはメインテンプレートのスクリプトで開始されるため、addthisは変更されたメタタグを取得しませんでした。

私たちの解決策は、ここに記載されているように、ディレクティブで共有構成を使用することでした：http ://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-sharing

このようにして、addthisは正しいURLとタイトルを取得します。もちろん、クライアント側以外のWebisteのソーシャル共有機能を完全に模倣したい場合、これは戦いの半分にすぎません。ヘッド内のタグを更新するには、独自のサービスも作成する必要があります。次に、phantomJSを使用してサイトの静的バージョンを作成し、google、facebook、およびその他のクローラーをそのサイトにリダイレクトする必要があります。

私たちが抱えている問題は、何らかの理由でボタンがIE8でレンダリングされないことです。まだ解決策を見つけていません。奇妙なことにaddthis.init()、HTMLを介してスクリプトタグで呼び出すと機能しますが、SPAでは機能しません。またaddthis.init()、利用可能です（つまり!!addthis.init() == true、ディレクティブで、何が問題なのかわかりません。

于 2013-10-14T19:48:02.157 に答える
2

@antonpinchukのソリューションは私にとってはうまく機能しましたが、カウンターが更新されないだけです...ディレクティブの最後に次の行を追加すると、すべてが魅力のように機能します:)

addthis.counter($(element).children('.addthis_counter').get());
于 2014-09-09T11:45:15.047 に答える
1

試す：

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

$window次のメソッドを呼び出した後、Angularディレクティブまたはコントローラーでオブジェクトを無効にします。$window.addthis.layers.refresh();

于 2016-03-16T00:24:39.917 に答える
0

おそらく、このスクリプトをパーシャルに追加するためのスクリプトタグ参照を配置する必要があります。それが最も簡単な修正です。

何が起こっているのかは、それらが実行されているときであり、パーシャルはまだロードされていないため、何にも影響しません。

于 2013-03-24T00:21:37.403 に答える