这可能是因为 FB 功能在 Angular 能够更改之前就启动了data-href
属性。
指令在这里似乎是一个不错的选择:
您基本上需要创建评论框afterAngular 可以提供正确的 URL。
因为这涉及到异步 DOM 操作,所以需要使用FB.XFBML.parse()
让 FB 处理评论框data-href
属性被改变。
该指令:
.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>
NOTE:
The directive's scope will constantly watch for changes in the page-href
attribute and update the comment-box. You can change this to suit your needs (e.g. also watch for changes in the other attributes or bind it once and stop watching).
另请参阅此简短的演示 http://jsfiddle.net/ExpertSystem/TLLFg/.