请参阅本文底部的更新
我正在尝试在 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>
My view:
<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 https://stackoverflow.com/questions/23516305/facebook-comment-plugin-angularjs但我的似乎不同，因为当我查看当前元素时，我看到 data-hrefis正确填充：
<div class="fb-comments" data-href="http://eat-sleep-code.com/#!/blog/2" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
UPDATE:
我将视图中的行更新为：
<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>
我添加了以下指令，现在正在显示评论框。然而，数据宽度属性现在被忽略。评论框以默认 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]);
});
}
};
});
