A Pen by CarterTsai.

fb-comments-directive-for-ng.markdown

fb comments directive for ng

A Pen by CarterTsai on CodePen.

License.

index.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<div ng-app="fbtest" ng-controller="FBCtrl">
    
  <fb-comment href="http://example.com/comments"
              numposts="1"
              colorscheme="light"
              order=""
              width="720">
  </fb-comment>
  
</div>

script.js

// Ref: https://developers.facebook.com/docs/plugins/comments/
angular.module('fb.comment', [])
.directive('fbComment', function() {
  
    function link(scope, element, attrs) {
      
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/zh_TW/all.js#xfbml=1&appId=638664449487662";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

    }
  
    return {
      link: link,
      // matches element
      restrict: 'E',      
      // Text Binding (Prefix: @)
      // One-way Binding (Prefix: &)
      // Two-way Binding (Prefix: =)
      scope: {
        href: '@href',
        numpost : '@numpost',
        colorscheme: '@colorscheme',
        order: '@order',
        width: '@width'
      },
      template: '<div class="fb-comments" '+
                      'data-href="{{href}}" '+
                      'data-numposts="{{numpost}}" '+
                      'data-colorscheme="{{colorscheme}}" '+
                      'data-order-by="{{order}}" '+
                      'data-width="{{width}}"> '+
                '</div>',
    };
});

var app = angular.module('fbtest', ['fb.comment']);

function FBCtrl($scope) {
    $scope.test = "testing";
}