Facebook的评论插件不AngularJS显示 [英] Facebook Comments Plugin not displaying in AngularJS
本文介绍了Facebook的评论插件不AngularJS显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请参阅更新底部这个帖子
我想实现在NG-重复Facebook的评论框和我与它有显示的问题。
在Chrome浏览器不显示，直到我点击刷新按钮，而在IE10我不能让它在所有显示。
我（简体）索引页：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN数据-NG-应用=eatsleep code＆GT;
＆LT; HEAD＆GT;
＆LT;标题数据-NG-绑定=PAGETITLE＆GT;＆放大器; LT;多吃，睡眠 - code /＆放大器; GT;＆LT; /标题＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;基本href =/＆GT;
＆LT;链接rel =stylesheet属性HREF =/风格/ jQuery的-ui.min.css/＆GT;
＆LT;链接rel =stylesheet属性HREF =/风格/ bootstrap.min.css/＆GT;
＆LT;链接rel =stylesheet属性HREF =/风格/引导-theme.min.css/＆GT;
＆LT;链接rel =stylesheet属性HREF =/风格/ EN-us.css/＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =集装箱液＆GT;
＆LT; DIV CLASS =COL-LG-8页内容的ID =内容的数据-NG-视图＆gt;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-LG-4页内容＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;页脚ID =页脚＆GT;
＆LT; DIV CLASS =集装箱液＆GT;
＆LT; / DIV＆GT;
＆LT; /页脚＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
＆LT;脚本类型=文/ JavaScript的SRC =// ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js\"></script>
＆LT;脚本类型=文/ JavaScript的SRC =// ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js\"></script>
＆LT;脚本类型=文/ JavaScript的 src=\"//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-resource.min.js\"></script>
＆LT;脚本类型=文/ JavaScript的 src=\"//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-route.min.js\"></script>
＆LT;脚本类型=文/ JavaScript的 src=\"//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-sanitize.min.js\"></script>
＆LT;脚本类型=文/ JavaScript的 src=\"//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-animate.min.js\"></script>
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ xml2json.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ bootstrap.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ jquery.validate.min.js推迟=推迟＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ render.min.js推迟=推迟＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ repo.min.js推迟=推迟＆GT;＆LT; / SCRIPT＆GT;
＆LT; DIV ID =FB-根＆GT;＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
（函数（D，S，id）的{
变种JS，FJS = d.getElementsByTagName（多个）[0];
如果（d.getElementById（ID））回报;
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）;
}（文件，脚本，Facebook的jssdk'））;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我的观点：
＆LT; DIV CLASS =博客主＆GT;
＆lt;物品类=博客文章数据-NG-IF =article.id == ||后后=== NULL数据-NG-重复=文章中data.blog.article |排序依据：'CREATEDATE ：真|切片：当前页*每页：当前是+ 1 *的pageSize的itemscope项目类型=http://schema.org/BlogPosting＆GT;
＆LT; H2类=博客标题后itemprop =标题＆GT;
＆LT; A HREF =HTTP：//eat-sleep-$c$c.com/# /博客/ {{article.id}}称号=永久链接到{{article.title .__ CDATA}}itemprop =URL＆GT; {{article.title .__ CDATA}}＆LT; / A＆GT;
＆LT; / H＆GT;
＆LT;跨度类=博客后元＆GT;发布针对＆lt;时间日期时间={{article.createdate |日期：'YYYY-MM-DD'}}＆GT; {{article.createdate |日期：'MMMM DD，YYYY H：MMA'}}＆LT; /时间＆gt;以＆lt;跨度itemprop =作者＆GT; {{article.author}}＆LT; / SPAN＆GT;＆LT; / SPAN＆GT;
＆LT; DIV CLASS =博客-后内容包装＆GT;
＆LT; DIV CLASS =博客内容后NG绑定-HTML =article.content .__ CDATAitemprop =TEXT＆GT;
{{article.content .__ CDATA}}
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV数据-NG-IF =article.id ==邮报＆GT;
＆LT; DIV CLASS =FB-意见数据HREF =HTTP：//eat-sleep-$c$c.com/# /博客/ {{article.id}}数据numposts =5数据色彩方案=轻的数据宽度=100％＆GT;＆LT; / DIV＆GT;
＆LT; BR /＆GT;
＆所述; A HREF =/＃！类=BTN BTN-默认BTN-SM博客键回＆GT;＆LT;跨度类=glyphicon glyphicon雪佛龙左博客键式备份图标＆GT;＆LT; / SPAN＆GT;返回＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; /条＆GT; ＆所述;格数据纳克-如果=numberOfPages→1＆GT;
＆LT;按钮式=按钮级=BTN BTN-默认BTN-SM博客键式旧的数据-NG-禁用=当前页== 0数据-NG-点击=当前页=当前是-1＆GT ;＆LT;跨度类=glyphicon glyphicon雪佛龙左博客键式旧的图标＆GT;＆LT; / SPAN＆GT;较早的帖子＆LT; /按钮＆GT;
＆LT;按钮式=按钮级=BTN BTN-默认BTN-SM博客按钮，新的数据-NG-禁用=当前页＆GT; = numberOfPages - 1数据-NG-点击=当前页=当前页+ 1＆GT;较新的帖子＆LT;跨度类=glyphicon glyphicon雪佛龙右博客键式更新的图标＆GT;＆LT; / SPAN＆GT;＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
我发现这个问题： Facebook的评论插件Angularjs ，但矿似乎是不同的，因为当我查看当前的元素，我看到数据的href的是的正确填充：
＆LT; DIV CLASS =FB-意见数据HREF =HTTP：//eat-sleep-$c$c.com/# /博客/ 2数据-numposts =5数据色彩方案=轻的数据宽度=100％＆GT;＆LT; / DIV＆GT;
更新：
我在视图中更新的行这样的：
＆LT; DIV CLASS =FB-意见DYN-FB-评论框页面HREF =HTTP：//eat-sleep-$c$c.com/# ！/博客/ {{article.id}}数据numposts =5数据色彩方案=轻的数据宽度=100％＆GT;＆LT; / DIV＆GT;
我添加下面的指令，现在的评论框中显示。然而，数据宽度属性现在被忽略。注释框在默认550px宽度渲染。
app.directive（'dynFbCommentBox'，函数（）{
功能createHTML（HREF，numposts，色彩方案，宽）{
回归'＆LT; DIV CLASS =FB-评论'+
数据HREF =+ HREF +''+
数据numposts =+ numposts +''+
数据colorsheme =+色彩方案+''+
数据宽度=+宽+'＆GT;' +
'＆LT; / DIV＆GT;';
}
返回{
限制：'A'，
范围： {}，
链接：功能postLink（范围，ELEM，ATTRS）{
ATTRS。观察$（'pageHref'，函数（newValue）以{
VAR HREF =为newValue;
VAR numposts = attrs.numposts || 5;
VAR色彩方案= attrs.colorscheme || '光';
VAR WIDTH = attrs.width || '100％';
elem.html（createHTML（HREF，numposts，色彩方案，宽））;
FB.XFBML.parse（ELEM [0]）;
}）;
}
};
}）;
解决方案
您将需要使该手表数据href属性如结合的http://stackoverflow.com/a/15285102/3715815 以及在你指着自己与Facebook的链接后。究其原因仍然是相同的;角需要一定的时间内插插的符号，因此Facebook的SDK上是存在的数据，基本上将只是火之间的值的 HTTP：//eat-sleep-$c$c.com/# /博客/ {{article.id}}，因为它不是一个组成部分棱角分明的内部循环。
也有许多其他的文章，与加载图像的问题涉及，因为浏览器将尝试使用src属性来获取所有图像当它遇到之一，真正的SRC值已插入之前也happing。因此，有是由核心角队取得指令，如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 http://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屋！
查看全文
