AngularJs and Facebook Comments

Question

I'm trying to dynamically update the review of facebook on my html , however is not showing , follow my Plunker.

WHAT can be done to render the comments ?

http://plnkr.co/edit/ggt7r0

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.fbComments = '<div id="comentarios" class="fb-comments" data-href="http://developers.facebook.com/docs/plugins/comments/" data-width="100%" data-numposts="5"></div>'; });

 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link href="style.css" rel="stylesheet" /> <script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="angular.js@1.2.x"></script> <script src="script.js"></script> </head> <body ng-controller="MainCtrl"> <div id="fb-root"></div> <script>(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.4"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <p><div ng-if="fbComments"> <div ng-bind-html="fbComments"></div> </div> </p> </body> </html>

LO0fC7XWJMts2P

Answer 1

The SDK parses your document for elements to replace with social plugins only once upon initialization.

If you add content later on, you need to call FB.XFBML.parse to have it go through the document (or parts thereof) again.

Answer 2

I did some testing and I ended up doing a directive and using FB.XFBML.parse () , follows suit working on Plunker:

http://plnkr.co/edit/oTj3jP

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.fbComments = 'http://developers.facebook.com/docs/plugins/comments/'; }); app.directive('fbCommentBox', function() { function createHTML(href, numposts, colorscheme, width) { return '<div class="fb-comments" ' + 'data-href="' + href + '" ' + 'data-numposts="' + numposts + '" ' + 'data-colorsheme="' + colorscheme + '" ' + 'data-width="' + width + '">' + '</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'; var width = attrs.width || '100%'; elem.html(createHTML(href, numposts, colorscheme, width)); FB.XFBML.parse(elem[0]); }); } }; });

 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script> document.write('<base href="' + document.location + '" />'); </script> <link href="style.css" rel="stylesheet" /> <script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="angular.js@1.2.x"></script> <script src="script.js"></script> </head> <body ng-controller="MainCtrl"> <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.4"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div ng-if="fbComments"> <div class="fb-comments" fb-comment-box page-href="{{fbComments}}" data-numposts="5" data-colorscheme="light" data-width="100%"></div> </div> </body> </html>

AngularJs and Facebook Comments

Question

2 answers

solution1
5 2015-08-24 09:21:24

solution2
1 2015-08-24 18:21:44

AngularJs and Facebook Comments

Question

2 answers

solution1 5 2015-08-24 09:21:24

solution2 1 2015-08-24 18:21:44

solution1
5 2015-08-24 09:21:24

solution2
1 2015-08-24 18:21:44