Stackoverflow_23516305: facebook-comment-plugin-angularjs

Illustration of answer to http://stackoverflow.com/questions/23516305/facebook-comment-plugin-angularjs.

by ExpertSystem

HTML

<script src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<div ng-controller="myCtrl">
    <input type="text" ng-model="input.val" />
    <button ng-click="updatePageID()">Get comments</button>
    <hr />
    <p>HTML for dynamic comment-box:</p>
    <div id="fb-comment-box" my-fb-comment-box=""
            page-href="http://mydomain.com/page/{{page.id}}"
            numposts="5"
            colorsheme="light">
    </div>
</div>

JavaScript

window.FB = {
    XFBML: {
        parse: function (elem) {
            var pre = document.createElement('pre');
            pre.textContent = elem.innerHTML;
            document.getElementById('fb-comment-box').innerHTML =
                    pre.outerHTML;
        }
    }
};

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.page  = {id: 1};
    $scope.input = {val: $scope.page.id};

    $scope.updatePageID = function () {
        $scope.page.id = $scope.input.val;
    };
});

app.directive('myFbCommentBox', 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]);
            });
        }
    };
});