Facebook评论插件不显示在AngularJS [英] Facebook Comments Plugin not displaying in AngularJS
本文介绍了Facebook评论插件不显示在AngularJS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在此POST下方查看更新
我正在尝试实施一个重复的Facebook评论框，并且有问题它显示。
在Chrome中，直到我点击刷新按钮才显示，而在IE10中，我无法显示。
我的（简化）索引页：
;！doctype html>
< html lang =endata-ng-app =eatsleepcode>
< head>
< title data-ng-bind =pageTitle& lt; eat-sleep-code />< / title>
< meta charset =utf-8/>
< base href =/>
< link rel =stylesheethref =/ style / jquery-ui.min.css/>
< link rel =stylesheethref =/ style / bootstrap.min.css/>
< link rel =stylesheethref =/ style / bootstrap-theme.min.css/>
< link rel =stylesheethref =/ style / en-us.css/>
< / head>
< body>
< div class =container-fluid>
< div class =col-lg-8 page-contentid =contentdata-ng-view>
< / div>
< div class =col-lg-4 page-content>
< / div>
< / div>
< footer id =footer>
< div class =container-fluid>
< / div>
< / footer>
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js\"></script>
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js\"></脚本>
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-resource.min.js\">< ; /脚本>
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-route.min.js\">< ; /脚本>
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-sanitize.min.js\">< ; /脚本>
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-animate.min.js\">< ; /脚本>
< script type =text / javascriptsrc =/ scripts / xml2json.min.js>< / script>
< script type =text / javascriptsrc =/ scripts / bootstrap.min.js>< / script>
< script type =text / javascriptsrc =/ scripts / app.js>< / script>
< script type =text / javascriptsrc =/ scripts / jquery.validate.min.jsdefer =defer>< / script>
< script type =text / javascriptsrc =/ scripts / render.min.jsdefer =defer>< / script>
< script type =text / javascriptsrc =/ scripts / repo.min.jsdefer =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>
我的观点：
< div class =blog-main>
< article class =blog-postdata-ng-if =article.id == post || post === NULLdata-ng-repeat =article.blog.article中的文章| orderBy：'createdate'：true | slice：currentPage * pageSize：currentPage + 1 * pageSizeitemscope itemtype =http://schema.org/BlogPosting>
< h2 class =blog-post-titleitemprop =headline>
< a href =http://eat-sleep-code.com/#!/blog/{{article.id}}title =永久链接到{{article.title .__ cdata}} itemprop = URL > {{article.title .__ CDATA}}< / A>
< / h2>
< span class =blog-post-meta>发布于< time datetime ={{article.createdate | date：'yyyy-MM-dd'}}> {{article。创建|日期：'MMMM dd，yyyy h：mma'}}< / time>由< span itemprop =author> {{article.author}}< / span>< / span>
< div class =blog-post-content-wrapper>
< div class =blog-post-contentng-bind-html =article.content .__ cdataitemprop =text>
{{article.content .__ cdata}}
< / div>
< / div>
< div data-ng-if =article.id == post>
< div class =fb-commentsdata-href =http://eat-sleep-code.com/#!/blog/{{article.id}}data-numposts =5 data-colorscheme =lightdata-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>回到< / A>
< / div>
< / article>
< div data-ng-if =numberOfPages> 1>
< button type =buttonclass =btn btn-default btn-sm blog-button-olderdata-ng-disabled =currentPage == 0data-ng-click =currentPage = currentPage -1>< span class =glyphicon glyphicon-chevron-left blog-button-older-icon>< / span>旧帖子< / button>
< button type =buttonclass =btn btn-default btn-sm blog-button-newerdata-ng-disabled =currentPage> = numberOfPages - 1data-ng-click = currentPage = currentPage + 1>较新的帖子< span class =glyphicon glyphicon-chevron-right blog-button-newer-icon>< / span>< / button>
< / div>
< / div>我发现这个问题： Facebook评论插件Angularjs ，但是我的看起来是不同的，因为当我查看当前元素时，我看到data-href 正确填充： < div class =fb-commentsdata-href =http：// eat-sleep-code。 com /＃！/ blog / 2data-numposts =5data-colorscheme =lightdata-width =100％>< / div>
更新：
我将视图中的行更新为：
< div class =fb-commentsdyn-fb-comment-box page-href =http://eat-sleep-code.com/#!/blog/ { article.id}}data-numposts =5data-colorscheme =lightdata-width =100％>< / div>
我添加了以下指令，现在显示评论框。但是，data-width属性现在被忽略。评论框的渲染默认为550px宽。
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>';
}
返回{
限制：'A'，
范围：{}，
链接： 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，色彩方案，宽度））;
FB.XFBML.parse（elem [0]）;
}）;
}
};
}）;
解决方案您需要制定一个监视数据的指令-href属性，与 https://stackoverflow.com/a/15285102/3715815而且在这个帖子你指向自己的Facebook链接。原因还是一样的;角度需要一些时间内插插值符号之间的值，因此facebook sdk只是在那里的数据上触发，这本质上将是 http://eat-sleep-code.com/#!/blog/ {{article.id}}，因为它不是角度的内部循环的一部分。
还有许多其他文章涉及到加载图像的问题，因为浏览器会尝试使用src属性来获取所有图像，当它遇到一个，也是在实际的src值被插值之前。因此，有核心角色团队的指令，例如处理这种常见用例的ng-src，但是在这一点上，您将不得不将其作为您链接到的描述来执行。
SEE UPDATE AT BOTTOM OF THIS POST
I am trying to implement a Facebook comments box in an ng-repeat and am having issues with it displaying.
In Chrome it doesn't display until I click the refresh button, whereas in IE10 I can not get it to display 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 view:
<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 issue: Facebook comment plugin Angularjs but mine appears to be different, because when I view the current elements, I see that the data-href is populated 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 to this:
<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 the comments box is displaying. However, the data-width attribute is now being ignored. The comments box is rendering at the default 550px width.
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]);
});
}
};
});
解决方案 You would need to make a directive that watches the data-href attribute as suggested in the (essentially same) issue with flash in https://stackoverflow.com/a/15285102/3715815 and also in the post you are pointing to yourself with the facebook link. The reason is still the same; angular takes some time interpolate the values between the interpolation symbols and therefore the facebook sdk just "fires" on the data that is there, which essentially will be http://eat-sleep-code.com/#!/blog/{{article.id}} because it is not a part of angular's internal loop.
There are also many other articles that deals with the issue of loading images, as the browser will try to fetch all images using the src attribute when it encounters one, also happing before the real src value has been interpolated. Therefore, there are are directives made by the core angular team such as ng-src that deals with such common usecases, but on this one you would have to do it as the post you are linking to describes.
这篇关于Facebook评论插件不显示在AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
