Skip to content

Instantly share code, notes, and snippets.

@laurentiuc

laurentiuc/addThis-directives.js

Last active February 8, 2017 19:29
Show Gist options
  • Save laurentiuc/6097836 to your computer and use it in GitHub Desktop.
Save laurentiuc/6097836 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS addThis directive
Raw
addThis-directives.js
angular.module('myApp').directive('addthisToolbox', ['$timeout', function($timeout) {
return {
restrict : 'A',
transclude : true,
replace : true,
template : '<div ng-transclude></div>',
link : function($scope, element, attrs) {
$timeout(function () {
addthis.init();
addthis.toolbox($(element).get(), {}, {
url: attrs.url,
title : "My Awesome Blog",
description : 'Checkout this awesome post on blog.me'
});
});
}
};
}]);
Raw
example.html
<html>
<head>
<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="></script>
</head>
<body>
<!-- html code -->
<div class="blog-posts" data-ng-repeat="post in posts">
<!-- AddThis Button BEGIN -->
<div data-addthis-toolbox data-url="http://blog.me/{{post.link}}" id="bp-{{post.id}}"
class="addthis_toolbox addthis_default_style addthis_16x16_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_email"></a>
</div>
<!-- AddThis Button END -->
</div>
<!-- more html code -->
</body>
</html>
@AleksandarGajic
Copy link

Thanks for sharing, this saved me a lot of time.
I've found one little bug in this code

addthis.toolbox($(element), {}, {

needs to be change to:

addthis.toolbox($(element).get(), {}, {

Regards.

@laurentiuc
Copy link
Author

Thanks Aleksandar! I've updated the code

@nickgs
Copy link

nickgs commented Oct 20, 2014

Thanks! I had to inject jQuery to get this to work properly. Below are the changes I made, along with a jQuery service so we can properly inject.

//jQuery service
myApp.factory('jQuery', [
        '$window',
        function ($window) {
            return $window.jQuery;
        }
]);

//a share this directive
angular.module('myApp').directive('addthisToolbox', ['$timeout','jQuery', function($timeout, jQuery) {
  return {
    restrict : 'A',
    transclude : true,
    replace : true,
    template : '<div ng-transclude></div>',
    link : function($scope, element, attrs) {
      $timeout(function () {
        addthis.init();
        addthis.toolbox(jQuery(element).get(), {}, {
          url: attrs.url,
          title : "My Awesome Blog",
          description : 'Checkout this awesome post on blog.me'
        });
      });
    }
  };
}]);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment