AngularJs和AddThis社交插件
我正尝试在AngularJS应用程序中使用AddThis javascript社交插件，但当我使用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>提前谢谢。
回答 6
Stack Overflow用户
发布于 2013-05-21 00:32:43
我已经创建了简单的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 site的默认窗口小部件代码也应该可以工作，只需删除&async=1和addthis.init()即可。
您可以使用类似的方法来控制其他addThis函数，如addthis.button()、addthis.counter()等。
Stack Overflow用户
发布于 2015-02-24 19:53:04
如果您正在使用新的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>
Stack Overflow用户
发布于 2013-10-15 03:48:02
我想为atonpinchuk的回答补充一点。我们在我们的应用中遇到的一个问题是，我们在不同的页面上都有addthis按钮，并且希望url和标题根据页面的不同而不同。我们有一个更新meta标签的服务，但因为addthis是通过我们的主模板中的脚本启动的，所以addthis没有获得更改后的meta标签。
我们的解决方案是使用指令中的共享配置，如下所示：http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-sharing
通过这种方式，addthis会获得正确的url和标题。当然，如果你想完全模仿非客户端网站用户的社交分享功能，这只是成功的一半。您还需要编写自己的服务来更新头部中的标签。然后，您需要使用phantomJS来创建站点的静态版本，并将google、facebook和其他爬虫重定向到该站点。
我们遇到的一个问题是，由于某些原因，按钮不能在IE8中呈现。还没有想出解决方案。奇怪的是，如果您在脚本标记中通过超文本标记语言调用它的addthis.init()，它可以工作，但这不适用于SPA。addthis.init()也是可用的(即指令中的!!addthis.init() == true，所以我不确定它有什么问题。
https://stackoverflow.com/questions/15593039
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号