我正在尝试在 AngularJS 应用程序中使用 AddThis javascript 社交插件，但当我使用 ng-view 加载部分内容时，它不会更新 addthis 插件图标。如果我刷新页面，它就会 (ctrl+F5) 。我认为 AngularJs 通过 Ajax 加载部分 View ，在这种情况下 addthis 不会显示加载页面的社交图标。
这是索引代码:
<header>
.....
</header>
<div>
<section id="content" ng-view></section>
</div>
<footer id="footer" ng-controller="footerCtrl">
...
</footer>
这是在部分标记中加载的部分 View ，其中我有 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 site应该也可以工作，只需删除 &async=1 和 addthis.init()。
您可以使用类似的方法来控制其他 addThis 函数，例如 addthis.button()、addthis.counter() 等。
关于jquery - AngularJs 和 AddThis 社交插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15593039/