Facebook comment plugin Angularjs

Question

I am facing a strange error while adding the facebook comment plugin in my AngularJS app. The simplified structure of the app page is

Answer 1

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.