AngularJs 和 Facebook 评论
[英]AngularJs and Facebook Comments
问题描述
I'm trying to dynamically update the review of facebook on my html , however is not showing , follow my Plunker.
我正在尝试在我的 html 上动态更新 facebook 的评论，但是没有显示，请关注我的 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 LO0fC7XWJMts2P
2 个解决方案
解决方案1
5 2015-08-24 09:21:24
The SDK parses your document for elements to replace with social plugins only once upon initialization. SDK 仅在初始化时解析您的文档中的元素以替换为社交插件一次。
If you add content later on, you need to call FB.XFBML.parse to have it go through the document (or parts thereof) again.如果稍后添加内容，则需要调用FB.XFBML.parse以使其再次通过文档（或其部分）。
解决方案2
1 2015-08-24 18:21:44
I did some testing and I ended up doing a directive and using FB.XFBML.parse () , follows suit working on Plunker:我做了一些测试，最后我做了一个指令并使用FB.XFBML.parse () ，效仿在 Plunker 上工作：
http://plnkr.co/edit/oTj3jP 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.