我在AngularJS应用中添加facebook评论插件时遇到了一个奇怪的错误。 应用页面的简化结构是
<html ng-app="myapp">
<head>
...
</head>
<body>
<div>
...
</div>
<div ng-view></div>
...
</body>
</html>
带有fb注释框的页面在ng-view中加载。包含fb注释框的页面结构如下
<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>
page是来自控制器的angularjs范围变量。当我在浏览器中加载此页面并执行检查元素。它显示正确的页面ID，即data-href是
data-href = "http://mydomain.com/page/2"
但在fb评论框下方，Facebook显示以下错误
我可以看到angularJS范围变量没有绑定。有谁知道如何解决这个问题？
答案 0 :(得分：22)
这可能是因为在Angular能够更改data-href属性之前FB功能已经启动。
指令似乎是一个不错的选择：
你基本上需要在之后创建评论框 Angular可以提供正确的网址
因为这涉及异步DOM操作，所以在FB.XFBML.parse()属性发生更改后，您需要使用data-href让FB处理注释框。
指令：
.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>
<子>
注意：
该指令的范围将持续监视page-href属性的更改并更新注释框。您可以根据自己的需要进行更改（例如，还要注意其他属性的更改或将其绑定一次并停止观看）。
另请参阅此 short demo 。