在本帖子的底部看到更新
我正在尝试在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 comment plugin Angularjs但我的看似不同，因为当我查看当前元素时，我看到数据-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]);
});
}
};
});
答案 0 :(得分：3)
你需要制作一个指令来监视data-href属性，如https://stackoverflow.com/a/15285102/3715815中闪存的（基本相同）问题所示，以及你用facebook链接指向自己的帖子。原因仍然是一样的;角度花费一些时间插值插值符号之间的值，因此facebook sdk只是＆＃34;触发＆＃34;关于那里的数据，基本上是http://eat-sleep-code.com/#!/blog/ {{article.id}}，因为它不是角度内部循环的一部分。
还有很多其他文章处理加载图像的问题，因为浏览器会在遇到一个图像时尝试使用src属性获取所有图像，在插入真实的src值之前也会出现问题。因此，核心角度团队（例如ng-src）有一些指令可以处理这些常见的用例，但是在这个指令上你必须按照你链接的帖子来描述。
答案 1 :(得分：0)
我正在尝试使用协议免费网址进行data-href attr;它没有工作;一旦我添加http它有效 - 可能这可能是一个原因。