当前位置: 首页 > 面试题库 >

AngularJs和AddThis社交插件

叶智
2023-03-14
问题内容

我正在尝试在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>

这是在section标签中加载的局部视图,其中我具有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>

提前致谢。


问题答案:

我创建了简单的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.button()addthis.counter()等。



 类似资料:
  • 问题内容: 我正在使用多个视图创建一个网站。页面的标签和标签通过$ rootScope变量进行更改。所以我有类似 每当将每个视图加载到网站上时,page_title变量都会更改,并且title和og:title标记将更新(一切正常。) 问题是,在某些视图上,我需要加载一个Facebook,一个Google+和一个Twitter按钮。我可以正确显示它们,但如果单击它们,则页面标题看起来像: 我试图使

  • 问题内容: 因此,我正在AngularJS中创建一个新站点,并且对此非常喜欢! 但是,我遇到了一个问题。我试图在我的textareas中添加一个名为“ Redactor”的jQuery插件,但是我认为正在发生的事情是,当我初始化该插件时,它将替换textarea元素。之所以有问题,是因为我为文本区域设置了“ ng-model”属性,如下所示: 我正在使用AngularJS UI拾取焦点事件,然后在

  • 这是一个为 wordpress 博客软件增加 AddThis 分享按钮的插件。

  • 问题内容: 我正在将Facebook社交插件添加到网页中 当我手动添加时: 它起作用,但是,当javascript代码添加它时,它不起作用 有任何想法吗 ? 问题答案: 初始化文档后,JSSDK会遍历您的文档,以查找可解析为社交插件的元素。如果希望它还解析以后添加到文档中的内容,则需要调用。

  • 我有一个网站,使用twitter,facebook或google登录系统。我使用oAuth,这是我的代码。 配置 控制器 问题是我如何知道用户使用哪一种社交媒体登录系统?

  • 我正在使用社交分享插件将我的手机应用程序中的消息和图片分享到facebook和twitter, 如果分享成功,应用程序将显示“分享成功”警报,如果插件显示任何错误消息,则显示“分享已取消” 对于facebook来说,这就像一种魅力,但在twitter中却有一个问题。它适用于所有场景,但重复推特(重复推特的人不止一次分享同一条推特)除外。当插件的所有条件都满足(互联网连接、用户身份验证、有效消息)时