我正在尝试在AngularJS应用程序中使用AddThis
javascript社交插件,但是当我使用ng-view加载部分时它不会更新addthis插件图标.如果我刷新页面(ctrl F5).我认为AngularJs通过Ajax加载部分视图,在这种情况下,addthis不显示加载页面的社交图标.
这是索引代码：
@H_404_4@<header> ..... </header> <div> <section id="content" ng-view></section> </div> <footer id="footer" ng-controller="footerCtrl"> ... </footer>这是在section标签中加载的局部视图,其中我有addthis图标：
@H_404_4@<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：
@H_404_4@<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脚本引用：
@H_404_4@<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工具箱
@H_404[email protected]('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());
}
}
});
用法示例：
@H_404_4@<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()等.
