Facebook评论插件未在AngularJS中显示
[英]Facebook Comments Plugin not displaying in AngularJS
问题描述
在本帖子的底部看到更新
我试图在ng-repeat中实现一个Facebook评论框，并且显示它有问题。
在Chrome中，直到我点击刷新按钮才会显示，而在IE10中我根本无法显示它。
我的（简化）索引页面：
<!doctype html>
<html lang="en" data-ng-app="eatsleepcode">
<head>
<title data-ng-bind="pageTitle"><eat-sleep-code /></title>
<meta charset="utf-8" />
<base href="/">
<link rel="stylesheet" href="/style/jquery-ui.min.css" />
<link rel="stylesheet" href="/style/bootstrap.min.css" />
<link rel="stylesheet" href="/style/bootstrap-theme.min.css" />
<link rel="stylesheet" href="/style/en-us.css" />
</head>
<body>
<div class="container-fluid">
<div class="col-lg-8 page-content" id="content" data-ng-view>
</div>
<div class="col-lg-4 page-content">
</div>
</div>
<footer id="footer">
<div class="container-fluid">
</div>
</footer>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-resource.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-route.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-sanitize.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-animate.min.js"></script>
<script type="text/javascript" src="/scripts/xml2json.min.js" ></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>
<script type="text/javascript" src="/scripts/jquery.validate.min.js" defer="defer"></script>
<script type="text/javascript" src="/scripts/render.min.js" defer="defer"></script>
<script type="text/javascript" src="/scripts/repo.min.js" defer="defer"></script>
<div id="fb-root"></div>
<script type="text/javascript">
(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'));
</script>
</body>
</html>
我的观点：
<div class="blog-main">
<article class="blog-post" data-ng-if="article.id == post || post===NULL" data-ng-repeat="article in data.blog.article | orderBy:'createdate':true | slice:currentPage*pageSize:currentPage+1*pageSize" itemscope itemtype="http://schema.org/BlogPosting">
<h2 class="blog-post-title" itemprop="headline">
<a href="http://eat-sleep-code.com/#!/blog/{{article.id}}" title="Permalink to {{article.title.__cdata}}" itemprop="url">{{article.title.__cdata}}</a>
</h2>
<span class="blog-post-meta">Posted on <time datetime="{{article.createdate | date:'yyyy-MM-dd'}}">{{article.createdate | date:'MMMM dd, yyyy h:mma'}}</time> by <span itemprop="author">{{article.author}}</span></span>
<div class="blog-post-content-wrapper">
<div class="blog-post-content" ng-bind-html="article.content.__cdata" itemprop="text">
{{article.content.__cdata}}
</div>
</div>
<div data-ng-if="article.id == post">
<div class="fb-comments" data-href="http://eat-sleep-code.com/#!/blog/{{article.id}}" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
<br />
<a href="/#!" class="btn btn-default btn-sm blog-button-back"><span class="glyphicon glyphicon-chevron-left blog-button-back-icon"></span> Back</a>
</div>
</article>
<div data-ng-if="numberOfPages > 1">
<button type="button" class="btn btn-default btn-sm blog-button-older" data-ng-disabled="currentPage == 0" data-ng-click="currentPage=currentPage-1"><span class="glyphicon glyphicon-chevron-left blog-button-older-icon"></span> Older Posts</button>
<button type="button" class="btn btn-default btn-sm blog-button-newer" data-ng-disabled="currentPage >= numberOfPages - 1" data-ng-click="currentPage=currentPage+1">Newer Posts <span class="glyphicon glyphicon-chevron-right blog-button-newer-icon"></span></button>
</div>
</div>
我发现了这个问题： Facebook评论插件Angularjs但我的看似不同，因为当我查看当前元素时，我看到data-href 被正确填充：
<div class="fb-comments" data-href="http://eat-sleep-code.com/#!/blog/2" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
更新：
我将视图中的行更新为：
<div class="fb-comments" dyn-fb-comment-box page-href="http://eat-sleep-code.com/#!/blog/{{article.id}}" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
我添加了以下指令，现在显示了注释框。 但是，现在忽略data-width属性。 注释框以默认的550px宽度呈现。
app.directive('dynFbCommentBox', 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]);
});
}
};
});
2 个解决方案
解决方案1
3 已采纳 2014-06-06 16:29:28
你需要制作一个指令来监视data-href属性，如https://stackoverflow.com/a/15285102/3715815中闪存的（基本相同）问题中的建议，以及你指向自己的帖子中facebook链接。 原因仍然是一样的; angular需要一些时间插值插值符号之间的值，因此facebook sdk只是“触发”那里的数据，这基本上就是http://eat-sleep-code.com/#!/blog/ {{ article.id}}因为它不是angular的内部循环的一部分。
还有许多其他文章处理加载图像的问题，因为浏览器会在遇到一个图像时尝试使用src属性获取所有图像，在插入真正的src值之前也会出现问题。 因此，核心角度团队（例如ng-src）有一些指令可以处理这些常见的用例，但是就此而言，你必须按照你要链接的帖子来描述。
解决方案2
0 2015-07-23 07:37:45
我正在尝试使用协议免费网址进行data-href attr; 它不起作用; 一旦我添加http它工作 - 可能这可能是一个原因。
AngularJs 和 Facebook 评论
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.