AngularJs and AddThis social plugin

Question

I\'m trying to use the AddThis javascript Social plugin in an AngularJS App, but It does not updates the addthis plugin icons when I load a partial with ng-view. If I refres

Answer 1

I have created the simple AngularJS directive to refresh AddThis toolbox defined inside the dynamically included partial

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());
        }
    }
});

Usage example:

Default widget code from addthis site should also work, just remove &async=1 and addthis.init().

You can use a similar approach to control other addThis functions, such as addthis.button(), addthis.counter() etc.