我试图在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>
当然,我有脚本引用的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函数,如addthis.button()
, addthis.counter()
等
如果你正在使用新的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>
想给atonpinchuk的答案再加一点。我们在应用中遇到的一个问题是,我们在各种页面上都有addthis按钮,并希望url和标题根据页面而变化。我们有一个更新元标签的服务,但因为addthis是在主模板中的脚本中启动的,所以addthis没有发现我们更改的元标签。
我们的解决方案是在指令中使用如下所示的共享配置:http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-sharing
这样addthis就可以选择正确的url和标题。当然,如果你想完全模仿非客户端网站的社交分享功能,这只是成功的一半。您还需要编写自己的服务来更新头部中的标记。然后你需要使用phantomJS创建静态版本的网站,并重定向谷歌,facebook和其他爬虫到它。
我们遇到的一个问题是,由于某种原因,按钮不能在IE8中渲染。我还没想出解决办法。奇怪的是,如果你通过HTML在脚本标签中调用它addthis.init()
,它就会起作用,但这对SPA不起作用。此外,addthis.init()
是可用的(即!!addthis.init() == true
在指令中,所以我不确定它有什么问题。
@antonpinchuk的解决方案对我来说很好,它只是不更新计数器…我在指令的末尾添加了以下行,现在一切都像魅力一样工作:)
addthis.counter($(element).children('.addthis_counter').get());
尝试:
`<script type="text/javascript">
//always refresh on URL change
window.addEventListener("hashchange", function () {
addthis.layers.refresh();
});
</script>`
在你的angular指令或控制器中调用$window
对象后调用下一个方法:$window.addthis.layers.refresh();
您可能需要在您的部分中添加此脚本的脚本标记引用。这是最简单的解决办法。
在它们运行的时候,部分还没有加载,所以它们不会影响任何东西