SEE UPDATE ON THIS MAIL NUMBER
I am trying to embed the Facebook comment box in ng-repeat and am having trouble displaying it.
In Chrome, it does not appear until I click the refresh button, whereas in IE10 I cannot display it at all.
My (simplified) index page:
<!doctype html> <html lang="en" data-ng-app="eatsleepcode"> <head> <title data-ng-bind="pageTitle"><eat-sleep-code /></title> <meta charset="utf-8" /> <base href="/"> <link rel="stylesheet" href="/style/jquery-ui.min.css" /> <link rel="stylesheet" href="/style/bootstrap.min.css" /> <link rel="stylesheet" href="/style/bootstrap-theme.min.css" /> <link rel="stylesheet" href="/style/en-us.css" /> </head> <body> <div class="container-fluid"> <div class="col-lg-8 page-content" id="content" data-ng-view> </div> <div class="col-lg-4 page-content"> </div> </div> <footer id="footer"> <div class="container-fluid"> </div> </footer> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-resource.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-route.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-sanitize.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-animate.min.js"></script> <script type="text/javascript" src="/scripts/xml2json.min.js" ></script> <script type="text/javascript" src="/scripts/bootstrap.min.js"></script> <script type="text/javascript" src="/scripts/app.js"></script> <script type="text/javascript" src="/scripts/jquery.validate.min.js" defer="defer"></script> <script type="text/javascript" src="/scripts/render.min.js" defer="defer"></script> <script type="text/javascript" src="/scripts/repo.min.js" defer="defer"></script> <div id="fb-root"></div> <script type="text/javascript"> (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/en_US/sdk.js#xfbml=1&appId=1442336282690482&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> </body> </html>
My opinion:
<div class="blog-main"> <article class="blog-post" data-ng-if="article.id == post || post===NULL" data-ng-repeat="article in data.blog.article | orderBy:'createdate':true | slice:currentPage*pageSize:currentPage+1*pageSize" itemscope itemtype="http://schema.org/BlogPosting"> <h2 class="blog-post-title" itemprop="headline"> <a href="http://eat-sleep-code.com/#!/blog/{{article.id}}" title="Permalink to {{article.title.__cdata}}" itemprop="url">{{article.title.__cdata}}</a> </h2> <span class="blog-post-meta">Posted on <time datetime="{{article.createdate | date:'yyyy-MM-dd'}}">{{article.createdate | date:'MMMM dd, yyyy h:mma'}}</time> by <span itemprop="author">{{article.author}}</span></span> <div class="blog-post-content-wrapper"> <div class="blog-post-content" ng-bind-html="article.content.__cdata" itemprop="text"> {{article.content.__cdata}} </div> </div> <div data-ng-if="article.id == post"> <div class="fb-comments" data-href="http://eat-sleep-code.com/#!/blog/{{article.id}}" data-numposts="5" data-colorscheme="light" data-width="100%"></div> <br /> <a href="/#!" class="btn btn-default btn-sm blog-button-back"><span class="glyphicon glyphicon-chevron-left blog-button-back-icon"></span> Back</a> </div> </article> <div data-ng-if="numberOfPages > 1"> <button type="button" class="btn btn-default btn-sm blog-button-older" data-ng-disabled="currentPage == 0" data-ng-click="currentPage=currentPage-1"><span class="glyphicon glyphicon-chevron-left blog-button-older-icon"></span> Older Posts</button> <button type="button" class="btn btn-default btn-sm blog-button-newer" data-ng-disabled="currentPage >= numberOfPages - 1" data-ng-click="currentPage=currentPage+1">Newer Posts <span class="glyphicon glyphicon-chevron-right blog-button-newer-icon"></span></button> </div> </div>
I found this problem: Angularjs Facebook comment plugin , but mine seems different, because when I look at the current elements, I see that the href data is filled correctly:
<div class="fb-comments" data-href="http://eat-sleep-code.com/#!/blog/2" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
UPDATE:
I updated the line in the view:
<div class="fb-comments" dyn-fb-comment-box page-href="http://eat-sleep-code.com/#!/blog/{{article.id}}" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
I added the following directive, and now a comment box is displayed. However, the width-width attribute is now ignored. The comment field displays a default rendering of 550 pixels wide.
app.directive('dynFbCommentBox', 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]); }); } }; });