Блог

Главная - Вопросы по программированию - Комментарии AngularJS и Facebook

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

#javascript #angularjs #facebook #facebook-javascript-sdk

#javascript #angularjs #Facebook #API

Вопрос:

Я пытаюсь динамически обновлять обзор 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="angular.js@1.2.x"></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=1amp;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

Ответ №1:

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

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

Комментарии:

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

Ответ №2:

Я провел некоторое тестирование, и в итоге я выполнил директиву и использовал 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="angular.js@1.2.x"></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=1amp;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>