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

Question

我正在使用 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 版本都不起作用。)

Answer 1

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