AngularJs和AddThis社交插件
我正在尝试在AngularJS应用程序中使用AddThis javascript社交插件，但是当我使用ng-view加载部分时，它不会更新addthis插件图标。 如果我刷新页面（ctrl + F5）。 我认为AngularJs通过Ajax加载部分视图，在这种情况下，addthis不显示加载页面的社交图标。
这是索引代码：
..... 这是在section标签中加载的局部视图，其中我有addthis图标：
当然，我在主页中有脚本参考文件AddThis：
var addthis_config = { "data_track_addressbar": true };
我在angularJs引用之前有jquery脚本引用：
提前致谢。
我创建了简单的AngularJS指令来刷新动态包含的部分内定义的AddThis工具箱
angular.module('Directive.AddThis', []) /** * AddThis widget directive * * Usage: * 1. include `addthis_widget.js` in header with async=1 parameter * * http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-url * 2. add "addthis-toolbox" directive to a widget's toolbox div * * ... ^ * */ .directive('addthisToolbox', function() { return { restrict: 'A', transclude: true, replace: true, template: '', 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()); } } });
用法示例：
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: '', link: function ($scope, element, attrs) { // Checks if addthis is loaded yet (initial page load) if (addthis.layers.refresh) { addthis.layers.refresh(); } } }; });
HTML：
希望通过atonpinchuk为答案增加一点。 我们在我们的应用程序中遇到的一个问题是我们在各个页面上都有addthis按钮，并希望URL和标题因页面而异。 我们有一个更新元标记的服务，但是因为addthis是在我们的主模板中使用脚本启动的，所以我没有选择我们更改的元标记。
我们的解决方案是在我们的指令中使用共享配置，如下所示： http ： //support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-sharing
这样，addthis会选择正确的url和标题。 当然，如果你想完全模仿非客户端网站的社交共享function，这只是成功的一半。 您还需要编写自己的服务来更新标题。 然后，您需要使用phantomJS创建您网站的静态版本，并将谷歌，脸书和其他抓取工具重定向到它。
我们遇到的一个问题是，由于某种原因，按钮不会在IE8中呈现。 尚未找到解决方案。 奇怪的是，如果你通过HTML在脚本标签addthis.init()其addthis.init() ，它就可以工作，但这不适用于SPA。 另外addthis.init()是可用的（即指令中的!!addthis.init() == true ，所以我不确定它有什么问题。
@ antonpinchuk的解决方案对我来说效果很好，它只是不更新计数器…我在指令的末尾添加了以下行，现在一切都像魅力:)
addthis.counter($(element).children('.addthis_counter').get());
尝试：
``
在你的angular指令或控制器inyect de $window对象之后调用下一个方法： $window.addthis.layers.refresh();
您可能需要在部分中添加脚本标记引用以添加此脚本。 这将是最简单的解决方案。
发生的事情是在它们运行的时候，部分还没有加载，所以它们不会影响任何东西。