Facebook评论插件未在AngularJS中显示

在本post的底部看到更新

我试图在ng-repeat中实现一个Facebook评论框，并且显示它有问题。

在Chrome中，直到我点击刷新按钮才会显示，而在IE10中，我根本无法显示它。

我的（简化）索引页面：

            
 
 
 
 
 
 
 
 
 
              
  (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/en_US/sdk.js#xfbml=1&appId=1442336282690482&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));    

我的看法：

 
 
 
 {{article.title.__cdata}} 
 Posted on {{article.createdate | date:'MMMM dd, yyyy h:mma'}} by {{article.author}} 
 
 {{article.content.__cdata}} 
 
 
 
 
  Back 
 
 
 1">  Older Posts = numberOfPages - 1" data-ng-click="currentPage=currentPage+1">Newer Posts  
  

我发现了这个问题： Facebook评论插件Angularjs但我的看似不同，因为当我查看当前元素时，我看到data-href 被正确填充：

---

---

更新：

我在视图中更新了这一行：

我添加了以下指令，现在显示了注释框。 但是，现在忽略data-width属性。 注释框以默认的550px宽度呈现。

 app.directive('dynFbCommentBox', function () { function createHTML(href, numposts, colorscheme, width) { return '
' + '
'; } 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]); }); } }; }); 

Answer 1

你需要制作一个指令来监视data-href属性，如https://stackoverflow.com/a/15285102/3715815中闪存的（基本相同）问题中的建议，以及你指向自己的post中的指示facebook链接。 原因仍然是一样的; angular需要一些时间插值插值符号之间的值，因此facebook sdk只是“触发”那里的数据，这基本上是http://eat-sleep-code.com/#!/blog/ {{ article.id}}因为它不是angular的内部循环的一部分。

还有许多其他文章处理加载图像的问题，因为浏览器会在遇到一个图像时尝试使用src属性获取所有图像，在插入真实的src值之前也会出现问题。 因此，核心角度团队（例如ng-src）有一些指令可以处理这些常见的用例，但是在这个指针上，你必须按照你要链接的post来描述。

Answer 2

我正在尝试使用协议免费url进行data-href attr; 它不起作用; 一旦我添加http它工作 – 可能这可能是一个原因。