AngularJs et AddThis plugin social
J’essaie d’utiliser le plugin social javascript AddThis dans une application AngularJS, mais il ne met pas à jour les icons du plugin addthis lorsque je charge un partial avec ng-view. Si j’actualise la page, c’est le cas (ctrl + F5). Je pense que AngularJs charge les vues partielles via Ajax et dans ce cas, ceci n’affiche pas les icons sociales de la page chargée.
C’est le code d’index:
..... C’est la vue partielle qui se charge dans la balise section, où j’ai les icons addthis:
Bien sûr, j’ai la référence de script pour AddThis dans la page d’accueil:
var addthis_config = { "data_track_addressbar": true };
J’ai la référence de script jquery avant la référence d’angularJs:
Merci d’avance.
- md-autocomplete pas trouvé en passant les anciennes valeurs lorsque nous soumettons le formulaire?
- Préserver la position du curseur avec angularjs
- Comment obtenir la valeur offset (). Top d’un élément sans utiliser jQuery?
- La requête $ http n’envoie pas de cookies sur plusieurs domaines dans CORS angular
- AngularJS: $ viewContentLoaded déclenché avant l’affichage partiel
J’ai créé la directive simple AngularJS pour actualiser la boîte à outils AddThis définie dans la partie partielle incluse
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 { ressortingct: '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()); } } });
Exemple d’utilisation:
Le code de widget par défaut de addthis site devrait également fonctionner, il suffit de supprimer &async=1 et addthis.init() .
Vous pouvez utiliser une approche similaire pour contrôler d’autres fonctions addThis, telles que addthis.button() , addthis.counter() etc.
Si vous utilisez la nouvelle configuration de tableau de bord AddThis, vous pouvez simplement envelopper addthis.layers.refresh() (voir: http://www.addthis.com/academy/using-dashboard-configuration-tools-dynamically/ ) dans une directive et append à votre div.
.directive('addthisToolbox', function() { return { ressortingct: '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:
Je voulais append un point supplémentaire à la réponse de atonpinchuk. Un problème que nous avions dans notre application était que nous avions les boutons addthis sur différentes pages et que nous voulions que l’URL et le titre varient en fonction de la page. Nous avons un service qui met à jour les balises méta, mais comme addthis est lancé avec le script de notre modèle principal, addthis n’a pas repris nos balises méta modifiées.
Notre solution consistait à utiliser la configuration de partage de notre directive, comme indiqué ici: http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-sharing
De cette façon, addthis récupère l’URL et les titres appropriés. Bien sûr, si vous voulez imiter complètement les fonctionnalités de partage social d’un site Web non-client, ce n’est que la moitié du combat. Vous devez également écrire votre propre service pour mettre à jour les balises dans la tête. Ensuite, vous devez utiliser phantomJS pour créer des versions statiques de votre site et y redirect google, facebook et autres robots d’exploration.
Un problème que nous rencontrons est que les boutons ne rendent pas dans IE8 pour une raison quelconque. Je n’ai pas encore trouvé de solution. La chose étrange est que cela fonctionne si vous l’appelez addthis.init() dans une balise de script via le code HTML, mais cela ne fonctionnera pas pour un SPA. De plus, addthis.init() est disponible (c’est-à-dire !!addthis.init() == true dans la directive, je ne suis donc pas sûr de ce qui ne va pas.
La solution de @ antonpinchuk a bien fonctionné pour moi, elle ne met simplement pas à jour le compteur … J’ai ajouté la ligne suivante à la fin de la directive et maintenant tout fonctionne à merveille 🙂
addthis.counter($(element).children('.addthis_counter').get());
Essayer:
``
Dans votre directive angular ou contrôleur object inyect de $window après avoir appelé la méthode suivante: $window.addthis.layers.refresh();
Vous aurez probablement besoin de mettre les références de balises de script pour votre ajout de ce script dans votre partial. Ce serait la solution la plus facile.
Ce qui se passe, c’est qu’au moment où ils sont exécutés, le partiel n’a pas encore été chargé, ils n’affectent donc rien.