Facebook comment plugin Angularjs

Je suis confronté à une erreur étrange lors de l'ajout du plugin de commentaire facebook dans mon application AngularJS. La structure simplifiée de la page de l'application estFacebook comment plugin Angularjs

<html ng-app="myapp"> 
<head> 
... 
</head> 
<body> 
<div> 
... 
</div> 
<div ng-view></div> 
... 
</body> 
</html>

La page avec la boîte de commentaire fb est chargé en ng vue. La structure de la page qui contient la zone de commentaire fb est comme suit

<div id="fb-comment-box> 
<div class="fb-comments" data-href="http://mydomain.com/page/{{ page.id }}" data-numposts="5" data-colorsheme="light"></div> 
</div>

La page est variable portée AngularJS qui vient du contrôleur. Quand je charge cette page dans le navigateur et inspecte l'élément. Il montre l'ID de page correcte à savoir des données href est

data-href = "http://mydomain.com/page/2"

Mais en dessous de la boîte de commentaires fb, Facebook montre erreur suivant

Warning: http://mydomain.com/page/%7B%7B%20page.id%7D%7D is unreachable.

Je peux voir la variable d'étendue AngularJS n'est pas obligatoire. Est-ce que quelqu'un sait comment résoudre ce problème?

Source

2014-05-07 Bibek Subedi

Ceci est probablement dû au fait que la fonctionnalité FB intervient avant que Angular puisse modifier l'attribut data-href.

Une directive semble être un bon choix ici:

Vous avez besoin essentiellement de créer le commentaire-box après angulaire peut fournir l'URL correcte.
Étant donné que cela implique une manipulation DOM asynchrone, vous devez utiliser FB.XFBML.parse() pour que FB traite la zone de commentaire une fois que l'attribut data-href a été modifié.

La directive:

.directive('dynFbCommentBox', function() { 
    function createHTML(href, numposts, colorscheme) { 
     return '<div class="fb-comments" ' + 
         'data-href="' + href + '" ' + 
         'data-numposts="' + numposts + '" ' + 
         'data-colorsheme="' + colorscheme + '">' + 
       '</div>'; 
    } 

    return { 
     restrict: 'A', 
     scope: {}, 
     link: function postLink(scope, elem, attrs) { 
      attrs.$observe('pageHref', function (newValue) { 
       var href  = newValue; 
       var numposts = attrs.numposts || 5; 
       var colorscheme = attrs.colorscheme || 'light'; 

       elem.html(createHTML(href, numposts, colorscheme)); 
       FB.XFBML.parse(elem[0]); 
      }); 
     } 
    }; 
});

Le code HTML:

<div id="fb-comment-box" dyn-fb-comment-box 
     page-href="https://example.com/page/{{page.id}}" 
     numposts="5" 
     colorscheme="light"> 
</div>

_{REMARQUE:
champ d'application de la directive sera constamment surveiller les changements dans l'attribut page-href et mettre à jour le commentaire-box . Vous pouvez modifier cela en fonction de vos besoins (par exemple, observez également les modifications des autres attributs ou reliez-le une fois et arrêtez de regarder).}

Voir aussi, ce short demo.

Source

2014-05-10 12:57:21 gkalpak

Merci pour l'explication et la réponse. J'ai implémenté votre code mais j'ai obtenu l'erreur suivante: https://docs.angularjs.org/error/$parse/syntax?p0= –

J'ai remarqué l'erreur et mis à jour la réponse il y a quelques minutes. Assurez-vous de copier la réponse mise à jour. (Malheureusement, je ne peux pas le tester avec le vrai FB, donc je ne fais que créer un objet fictif - j'espère qu'il devrait fonctionner aussi bien avec l'objet réel.) – gkalpak

J'ai ajouté un lien vers une démo-implémentation (en utilisant le faux FB qui sort juste le HTML). – gkalpak

Facebook comment plugin Angularjs

Répondre

Questions connexes