Facebook comment plugin Angularjs

2020-05-24 08:35发布

站内问答 / 移动开发
1482 1 6

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>

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>

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"

But below the fb comment box, Facebook shows following error

Warning: http://mydomain.com/page/%7B%7B%20page.id%7D%7D is unreachable.

I can see the angularJS scope variable is not binding. Does anyone know how to solve this issue?

1条回答
欢心
2楼-- · 2020-05-24 09:12

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:

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.

The directive:

.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]);
            });
        }
    };
});

The 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).

See, also, this short demo.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)