AngularJs 和 Facebook 评论
[英]AngularJs and Facebook Comments
问题描述
我正在尝试在我的 html 上动态更新 facebook 的评论，但是没有显示，请关注我的 Plunker。
可以做什么来呈现评论？
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
2 个解决方案
解决方案1
5 2015-08-24 09:21:24
SDK 仅在初始化时解析您的文档中的元素以替换为社交插件一次。
如果稍后添加内容，则需要调用FB.XFBML.parse以使其再次通过文档（或其部分）。
解决方案2
1 2015-08-24 18:21:44
我做了一些测试，最后我做了一个指令并使用FB.XFBML.parse () ，效仿在 Plunker 上工作：
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和ionic实现类似于Facebook的注释部分
[英]I want to implement comments section similar to that of facebook using angularJs and ionic
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.