AngularJs и Facebook Комментарии

Question

AngularJs и Facebook Комментарии

0

Я пытаюсь динамически обновлять обзор facebook на моем html, однако не отображается, следуйте за моим Plunker.

ЧТО можно сделать, чтобы сделать комментарии?

http://plnkr.co/edit/ggt7r0

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.fbComments = '<div id="comentarios" class="fb-comments" data-href="http://developers.facebook.com/docs/plugins/comments/" data-width="100%" data-numposts="5"></div>';
  
  
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="[email protected]"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
     <div id="fb-root"></div>
        <script>(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/pt_BR/sdk.js#xfbml=1&version=v2.4";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>
            
    <p><div ng-if="fbComments">  
    <div ng-bind-html="fbComments"></div>    
   
                                        
                   </div>    </p>
  </body>

</html>

LO0fC7XWJMts2P

henriquedpereira 23 авг. 2015, в 23:57

Источник

Теги:

javascript

angularjs

facebook

api

2 ответа

Ещё вопросы

CBroe · Answer 1 · 2015-08-24T07-34-00.000Z

SDK анализирует ваш документ для элементов, заменяемых социальными плагинами только один раз при инициализации.

Если вы позже добавите контент, вам нужно вызвать FB.XFBML.parse чтобы снова просмотреть документ (или его части).

В agularjs как я? В моем случае я положил код в контроллере? Вы можете изменить мой код, чтобы увидеть, как он будет выглядеть?

henriquedpereira · Answer 2 · 2015-08-24T15-41-00.000Z

Я провел некоторое тестирование, и я закончил работу над директивой и использовал FB.XFBML.parse(), следуя примеру Plunker:

http://plnkr.co/edit/oTj3jP

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.fbComments = 'http://developers.facebook.com/docs/plugins/comments/';
});

app.directive('fbCommentBox', function() {
  function createHTML(href, numposts, colorscheme, width) {
    return '<div class="fb-comments" ' +
      'data-href="' + href + '" ' +
      'data-numposts="' + numposts + '" ' +
      'data-colorsheme="' + colorscheme + '" ' +
      'data-width="' + width + '">' +
      '</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';
        var width = attrs.width || '100%';
        elem.html(createHTML(href, numposts, colorscheme, width));
        FB.XFBML.parse(elem[0]);
      });
    }
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="[email protected]"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div id="fb-root"></div>
  <script>
    (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/pt_BR/sdk.js#xfbml=1&version=v2.4";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

  <div ng-if="fbComments">
    <div class="fb-comments" fb-comment-box page-href="{{fbComments}}" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
  </div>
</body>

</html>