我正在使用 angular-ui-route 来更改我的页面。一些页面包括 facebook 社交插件,例如评论和点赞框。但是,当路由改变时,插件没有显示。
这是我的指令。 HTML部分很简单
app.directive('fbComment', function () {
return {
restrict: "E",
template: '<div class="fb-comments" data-href="http://example.com/comments" data-width="630" data-numposts="5" data-colorscheme="light"></div>'
}
});
这是我的 ui-router 配置。 content.faq 路由是包含 Comment 插件的页面。
$stateProvider
.state('landing', {
url: "/",
template: " ",
onEnter: function($rootScope){
$rootScope.isContent = false;
}
})
.state('content', {
abstract: true,
url: "/",
templateUrl: "/javascripts/angular/views/content.html",
onEnter: function($rootScope){
$rootScope.isContent = true;
}
})
.state('content.faq', {
url: "faq",
templateUrl: "/javascripts/angular/views/faq.html",
onEnter: function($rootScope){
$rootScope.isContent = true;
}
})
我尝试了 iframe 版本,它有效。不幸的是,评论插件没有 iframe 版本,所以我想我还是得弄清楚。 (html5 和 XFBML 版本都不起作用。)
最佳答案
ezfb 处理了这个问题。
Github:https://github.com/pc035860/angular-easyfb
首先按照说明安装 ezfb。然后在您的 Angular 配置阶段:
angular.module('myApp').config(function(ezfbProvider) {
// ezfb settings
ezfbProvider.setLocale('zh_TW'); // if not en_US
ezfbProvider.setInitParams({
appId: 'YOUR_APP_ID',
version: 'v2.0'
});
});
你想放点赞框的地方:
<div class="fb-like-box" onrender="fbLikeRendered()"
data-href="https://www.facebook.com/YOUR_PAGE"
data-height="443" data-colorscheme="light" data-show-faces="true"
data-header="false" data-stream="true" data-show-border="false"></div>
半年后我如何面对同样的问题,并用谷歌搜索我自己的问题,这很有趣也很愚蠢。上次截止日期很近,所以我放弃并使用 iframe。这次仍然没有答案,我环顾四周并尝试了几种方法,包括 FB.XFBML.parse() 和 FB=null,但都没有用。仍然不确定是什么原因导致了问题。
关于javascript - 当 angular-ui-router 更改路由时,Facebook 社交插件消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22410131/