Facebook的评论插件Angularjs [英] Facebook comment plugin Angularjs
问题描述
我面临着一个奇怪的错误，而在我的AngularJS应用加入Facebook的评论插件。
在应用页面的简化结构是
I am facing a strange error while adding the facebook comment plugin in my AngularJS app. The simplified structure of the app page is
<html ng-app="myapp">
<head>
...
</head>
<body>
<div>
...
</div>
<div ng-view></div>
...
</body>
</html>
与FB评论框的页面加载在NG-视图。页面包含FB评论框的结构如下：
The page with fb comment box is loaded in ng-view. The structure of page that contains fb comment box is as follows
<div id="fb-comment-box>
<div class="fb-comments" data-href="http://mydomain.com/page/{{ page.id }}" data-numposts="5" data-colorsheme="light"></div>
</div>
的页是来自控制器angularjs范围的变量。当我加载浏览器页面，并做检查的元素。它显示了正确的页面ID即数据href是
The page is angularjs scope variable which comes from controller. When i load this page in browser and do inspect element. It shows the correct page id i.e. data-href is
data-href = "http://mydomain.com/page/2"
但下面的FB评论框，Facebook的显示以下错误
But below the fb comment box, Facebook shows following error
警告： http://mydomain.com/page/% 7B％7B％20page.id％7D％7D 是
不可达。
Warning: http://mydomain.com/page/%7B%7B%20page.id%7D%7D is unreachable.
我可以看到angularJS范围变量不具有约束力。有谁知道如何解决这个问题呢？
I can see the angularJS scope variable is not binding. Does anyone know how to solve this issue?
推荐答案
这可能是由于这样的事实，在之前的角能够改变数据HREF 属性。
This is probably due to the fact that the FB functionality kicks in before Angular is able to change the data-href attribute.
一个指令似乎是一个不错的选择在这里：
A directive seems like a good choice here:
您基本上需要创建注释框的在角可以提供正确的URL。结果
因为这涉及到异步DOM操作，你需要使用 FB.XFBML.parse（）让FB过程中的注释框一旦数据的href 属性被改变。
You basically need to create the comment-box after Angular can provide the correct URL.
Because this involves asynchronous DOM manipulation, you need to use FB.XFBML.parse() to let FB process the comment-box once the data-href attribute is changed.
该指令：
.directive('dynFbCommentBox', function () {
function createHTML(href, numposts, colorscheme) {
return '<div class="fb-comments" ' +
'data-href="' + href + '" ' +
'data-numposts="' + numposts + '" ' +
'data-colorsheme="' + colorscheme + '">' +
'</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';
elem.html(createHTML(href, numposts, colorscheme));
FB.XFBML.parse(elem[0]);
});
}
};
});
中的HTML：
<div id="fb-comment-box" dyn-fb-comment-box
page-href="https://example.com/page/{{page.id}}"
numposts="5"
colorscheme="light">
</div>
<子>
注意：结果
该指令的范围将不断地监视页面HREF 属性的变化在和更新自己的评论框。您可以更改为适合您的需要（如手表也为其他属性的改变或者一旦绑定和停止观看）。
又见这个 短演示
See, also, this short demo.
这篇关于Facebook的评论插件Angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
