Facebook评论插件Angularjs答案

【问题标题】：Facebook comment plugin AngularjsFacebook评论插件Angularjs
【发布时间】：2014-05-07 11:15:44
【问题描述】：

在我的 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显示以下错误

警告：http://mydomain.com/page/%7B%7B%20page.id%7D%7D 是无法访问。

我可以看到 angularJS 范围变量没有绑定。有谁知道如何解决这个问题？

【问题讨论】：

标签： facebook angularjs facebook-comments

【解决方案1】：

这可能是因为 FB 功能在 Angular 能够更改 data-href 属性之前启动。

在这里，指令似乎是一个不错的选择：

您基本上需要在 Angular 可以提供正确的 URL 之后创建评论框。
因为这涉及到异步 DOM 操作，所以一旦 data-href 属性发生更改，您需要使用 FB.XFBML.parse() 让 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。

【讨论】：

感谢您的解释和回答。我实现了您的代码，但出现以下错误：docs.angularjs.org/error/$parse/syntax?p0=
我注意到错误并在几分钟前更新了答案。确保复制更新的答案。（不幸的是，我不能用真正的 FB 东西来测试它，所以我只是在创建一个模拟对象——希望它应该和真实的对象一样好。）
我添加了一个演示实现的链接（使用仅输出 HTML 的模拟 FB）。
完美运行。你应得的赏金。非常感谢您的解释和工作。你也帮助我理解角度指令。 :)
如何制作这个字符串 "
localhost:3000/7/product-1" data-numposts="5" data-colorsheme="light">
" 在指令中更改为 html