当 angular-ui-router 更改路由时，Facebook 社交插件会消失答案

【问题标题】：Facebook social plugins disappear when angular-ui-router changes route当 angular-ui-router 更改路由时，Facebook 社交插件会消失
【发布时间】：2014-03-14 16:02:40
【问题描述】：

我正在使用 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 路由是包含评论插件的页面。

$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版本都不行。）

【问题讨论】：

developers.facebook.com/docs/reference/javascript/…
你解决了这个问题吗？
@SandroSimas 好吧，我没有……但我只是做了。这很有趣，因为我在开发另一个项目时再次搜索了我的问题。上次我使用 iframe 而不是 html5 来避免这个问题。这次我使用了ezfb。这很简单。我稍后会回答我过去的自己。

标签： javascript facebook angularjs

【解决方案1】：

ezfb 处理了这个问题。

Github：https://github.com/pc035860/angular-easyfb

按照说明先安装 ezfb。然后在您的角度配置阶段：

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，但都没有奏效。不过仍然不确定是什么导致了问题。

【讨论】：

【解决方案2】：

感谢您指出 ezfb。为了让 FB-cmets 插件显示在我的不同 ui-router 视图中，我必须解决这个问题：

<div class="fb-comments" data-href="https://www.facebook.com/YOUR_PAGE" data-width="100%" data-numposts="10"></div>

在 app.js 中：

app.config(function(ezfbProvider) {

  // Default init function
  var _defaultInitFunction = ['$window', 'ezfbInitParams', function ($window, ezfbInitParams) {
    // Initialize the FB JS SDK
    $window.FB.init(ezfbInitParams);
  }];
  ezfbProvider.setInitFunction(_defaultInitFunction);
  
});

如果它对某人有帮助。

【讨论】：