AngularJs 和 AddThis 社交插件 [英] AngularJs and AddThis social plugin

问题描述

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

这是索引代码:

.....</标题><div><section id="content" ng-view></section>

<footer id="footer" ng-controller="footerCtrl">...</页脚>

这是加载在 section 标签中的局部视图，我有 addthis 图标:

<p ng-bind-html-unsafe="homeContent.promo.entradilla"></p><br/><br/><!-- 添加此按钮开始--><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>
<!-- 添加此按钮结束-->

当然，我在主页上有关于 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://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

提前致谢.

解决方案

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

angular.module('Directive.AddThis', [])/*** AddThis小部件指令** 用法:* 1. 将 `addthis_widget.js` 包含在带有 async=1 参数的标题中* <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. 将addthis-toolbox"指令添加到小部件的工具箱div* <div addthis-toolbox class="addthis_toolbox addthis_default_style addthis_32x32_style">* ...^* </div>*/.directive('addthisToolbox', function() {返回 {限制:'A'，转置:真实，替换:真的，模板:'<div ng-transclude></div>',链接:函数($scope，元素，属性){//出于性能原因动态初始化//对于多次调用是安全的，只处理第一个调用(加载的 css/images，弹出注入)//http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-url//http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performanceaddthis.init();//Ajax 加载(绑定事件)//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-buttonsaddthis.toolbox($(element).get());}}});

使用示例:

<头><script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<my-pubid>&async=1"></script><身体><!-- 添加此按钮开始--><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>

<!-- 添加此按钮结束--></html>

来自 addthis site 的默认小部件代码也应该可以使用，只需删除 &async=1 和 addthis.init().

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

I'm trying to use the AddThis javascript Social plugin in an AngularJS App, but It does not updates the addthis plugin icons when I load a partial with ng-view. If I refresh the page it does (ctrl+F5) . I think AngularJs loads the partial views via Ajax an in that case addthis does not show the social icons of the loaded page.

This is the index code:

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

This is the partial view that loads in the section tag ,where i have the addthis icons:

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

Of course, i have the script reference fot AddThis in the Home page:

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

I have the jquery script reference before angularJs reference:

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

Thanks in advance.

解决方案

I have created the simple AngularJS directive to refresh AddThis toolbox defined inside the dynamically included partial

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());
        }
    }
});

Usage example:

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

Default widget code from addthis site should also work, just remove &async=1 and addthis.init().

You can use a similar approach to control other addThis functions, such as addthis.button(), addthis.counter() etc.

这篇关于AngularJs 和 AddThis 社交插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！