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 $ c中的FB功能踢$ C>属性。
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屋!