og tags meta, botones sociales y angularjs

Estoy creando un sitio web usando múltiples vistas. La etiqueta y las tags de la página se cambian a través de una variable $ rootScope. entonces tengo algo como

     

Cada vez que se carga cada vista en el sitio web, la variable page_title cambia y el título y las tags og: title se actualizan (todo funciona como se esperaba).

El problema es que, en algunas vistas, necesito cargar un Facebook, un botón de Google+ y un botón de Twitter. Puedo mostrarlos correctamente, pero si hago clic en cada uno, el título de la página parece ser algo así como:

 {{page_title}} 

Intenté retrasar la ejecución de los scripts de cada botón utilizando setTimeOut, pero no sirvió para nada. Pero los scripts solo leen lo que está escrito, no analizan el page_title.

¿Alguien sabe una solución a esto?

Gracias

Esto no se puede hacer usando javascript. Algunas personas piensan que Facebook está leyendo lo que está actualmente en la página. No es. Hace una solicitud por separado a su servidor utilizando la misma url (desde window.location.href) usando su Scraper, y el raspador de Facebook no ejecuta javascript. Es por eso que obtienes {{page_title}} cuando haces clic en algo así como un botón para compartir en Facebook. Su contenido tendrá que ser generado por el servidor, de modo que cuando Facebook llegue a la URL obtenga el contenido que necesita de antemano sin la necesidad de javascript. Puede hacer frente a la representación del lado del servidor de pocas maneras.

  1. Puede permitir que su tecnología del lado del servidor represente el contenido.
  2. Puede usar el enfoque PhantomJS https://github.com/steeve/angular-seo .

También existe la posibilidad de que pueda volver a generar widgets de Facebook. Usa su método de análisis :

 FB.XFBML.parse(); 

después de que tus cosas angulosas se hayan completado. No funciona para mi botón de compartir (¡aún!), Pero lo probé en Me gusta, y es genial. Básicamente vuelve a escanear el DOM y renderiza los widgets de Facebook. También puede pasarle un elemento único, algo así como esta directiva:

 'use strict'; angular.module('ngApp') .directive("fbLike", function($rootScope) { return function (scope, iElement, iAttrs) { if (FB && scope.$last) { FB.XFBML.parse(iElement[0]); } }; }); 

Este fragmento volvería a explorar el DOM para widgets html5 facebook fb-like cuando se crea el último elemento en el repetidor angular.