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

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

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

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

источник

2015-08-23 henriquedpereira

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

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

источник

2015-08-24 09:21:24 CBroe

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

Я сделал некоторые испытания, и я в конечном итоге делает директиву и использовать 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>

источник

2015-08-24 18:21:44 henriquedpereira

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

ответ

Смежные вопросы