AngularJs und AddThis Social Plugin

7

Ich versuche das AddThis JavaScript Social Plugin in einer AngularJS App zu verwenden, aber es aktualisiert die addthis plugin icons nicht, wenn ich eine partielle mit ng-view lade. Wenn ich die Seite aktualisiere (Strg + F5). Ich denke, AngularJs lädt die partiellen Ansichten über Ajax und in diesem Fall werden die sozialen Symbole der geladenen Seite nicht angezeigt.

Dies ist der Indexcode:

%Vor%

Dies ist die Teilansicht, die in das Abschnitts-Tag geladen wird, wo ich die addthis-Symbole habe:

%Vor%

Natürlich habe ich die Script-Referenz für AddThis auf der Homepage:

%Vor%

Ich habe die jquery-Skript-Referenz vor angularJs-Referenz:

%Vor%

Vielen Dank im Voraus.

    
rtrujillor 23.03.2013, 22:54
quelle

6 Antworten

10

Ich habe die einfache AngularJS-Direktive erstellt, um die AddThis-Toolbox zu aktualisieren, die in dem dynamisch eingebundenen partiellen

definiert ist %Vor%

Anwendungsbeispiel:

%Vor%

Der Standard-Widget-Code von diese Seite hinzufügen sollte ebenfalls funktionieren. Entfernen Sie einfach &async=1 und addthis.init() .

Sie können einen ähnlichen Ansatz verwenden, um andere addThis-Funktionen zu steuern, z. B. addthis.button() , addthis.counter() etc.

    
antonpinchuk 20.05.2013, 16:32
quelle
7

Wenn Sie die neue AddThis-Dashboard-Konfiguration verwenden, können Sie einfach addthis.layers.refresh() umbrechen (siehe: Ссылка ) in einer Direktive und füge sie deinem div hinzu.

%Vor%

HTML: <div addthis-toolbox class="addthis_sharing_toolbox"></div>

    
watsontom100 24.02.2015 11:53
quelle
2

Wollte der Antwort von atonpinchuk einen zusätzlichen Punkt hinzufügen. Ein Problem, das wir in unserer App hatten, war, dass wir diese Schaltflächen auf verschiedenen Seiten hatten und wollten, dass die URL und der Titel abhängig von der Seite variieren. Wir haben einen Service, der die Meta-Tags aktualisiert, aber weil addthis mit dem Skript in unserer Hauptvorlage initiiert wird, hat adddis unsere geänderten Meta-Tags nicht aufgegriffen.

Unsere Lösung bestand darin, die Sharing-Konfiguration in unserer Direktive wie hier erwähnt zu verwenden: Ссылка

Auf diese Weise erhalten Sie die richtige URL und die richtigen Titel. Natürlich, wenn Sie die Social-Sharing-Funktionen einer Nicht-Client-Seite Webmaster vollständig imitieren möchten, ist dies nur die halbe Miete. Sie müssten auch einen eigenen Dienst schreiben, um Tags im Kopf zu aktualisieren. Dann müssen Sie phantomJS verwenden, um statische Versionen Ihrer Site zu erstellen und Google, Facebook und andere Crawler darauf umzuleiten.

Ein Problem, das wir haben, ist, dass die Schaltflächen in IE8 aus irgendeinem Grund nicht gerendert werden. Habe noch keine Lösung gefunden. Das Seltsame ist, dass es funktioniert, wenn Sie es in einem Skript-Tag über das HTML als addthis.init() aufrufen, aber das wird nicht für ein SPA funktionieren. Auch addthis.init() ist verfügbar (dh !!addthis.init() == true in der Direktive, also bin ich mir nicht sicher, was damit nicht stimmt.

    
wlingke 14.10.2013 19:48
quelle
2

@ antonpinchuks Lösung hat gut für mich funktioniert, es aktualisiert einfach nicht den Zähler ... Ich habe die folgende Zeile am Ende der Anweisung hinzugefügt und nun funktioniert alles wie ein Zauber:)

%Vor%     
armoucar 09.09.2014 11:45
quelle
1

Versuchen Sie:

%Vor%

In Ihrer Winkelanweisung oder in Ihrem Controller wird% ce_de% Objekt nach Aufruf die nächste Methode $window

gesetzt     
Esteban 16.03.2016 00:24
quelle
0

Sie werden wahrscheinlich die Script-Tag-Referenzen für das Hinzufügen dieses Skripts in Ihren Teil einfügen müssen. Das wäre die einfachste Lösung.

Was passiert, ist zu der Zeit, in der sie ausgeführt werden, die partielle wurde noch nicht geladen, also beeinflussen sie nichts.

    
Ben Lesh 24.03.2013 00:21
quelle

Tags und Links