AngularJS + Facebook喜欢指令不起作用

AngularJS + Facebook like Directive not working

本文关键字：指令 不起作用 喜欢 Facebook AngularJS      更新时间：2023-09-26

我正在开发一个AngularJs应用程序，该应用程序在视图中集成了类似fb的内容。它仅在第一次工作，如果我也刷新浏览器，当我导航到其他视图并返回时，插件不起作用。

我创建了一个指令。

angular.module('myApp.directives', []).directive('fbLike',['$timeout', function($timeout) {
return {
    restrict: 'A',
    scope: {},
    template: "<div class='"fb-like-box'" data-href='"{{page}}'" data-width='"{{width}}'" data-show-faces='"{{faces}}'" data-height='"{{height}}'" data-show-border='"{{border}}'" data-stream='"{{stream}}'" data-header='"{{header}}'"></div>",
    link: function($scope, $element, $attrs) {
        var working, _ref, _ref1;
        $scope.page ="https://www.facebook.com/company_name";
        $scope.border = false;
        $scope.height = (_ref = $attrs.fbHeight) != null ? _ref : '260';
        $scope.faces = $attrs.fbFaces != null ? $attrs.fbFaces : 'false';
        $scope.stream = $attrs.fbStream != null ? $attrs.fbStream : 'true';
        $scope.header = $attrs.fbHeader != null ? $attrs.fbHeader : 'false';
        $scope.width = (_ref1 = $attrs.fbWidth) != null ? _ref1 : $element.parent().width()-19;
        $timeout(function () { return typeof FB !== "undefined" && FB !== null ? FB.XFBML.parse($element.parent()[0]): void 0; });
    }
};}]);

我的观点

    <script>
window.fbAsyncInit = function() {
 FB.init({
appId: '',
     status: true, // check login status
     cookie: true, // enable cookies to allow the server to access the session
     xfbml: true,  // parse XFBML
     oauth: true
   });
  };
(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/es_LA/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div fb-like></div>

我正在寻找其他选择，但没有运气。

我不知道怎么了。

非常感谢

我发现的最佳解决方案是将ezfb模块添加到我的应用程序中，现在它运行良好。

我完全推荐这个模块。

.config(function ($FBProvider) {
  $FBProvider.setInitParams({
    appId: '386469651480295'
  });  
})

在Plunker Demo上有一个演示

Github链接

你应该能够做一些简单的事情，比如： 

directives.directive('fbLike', function () {
    return {
        restrict:'E',
        template: '<div class="fb-like" data-href="{{page}}" data-colorscheme="light" data-layout="box_count" data-action="like" data-show-faces="true" data-send="false"></div>'
    }
});

。在 HTML 中，它很简单：

<fb-like />

另请注意，如果您未在类似代码中指定的域上托管应用程序，则它将不会显示。 在 chrome 中，您可以在开发人员工具中单击网络，然后查看从类似小部件的 JavaScript 完成的 ping 结果。 

<div><span>Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App&#039;s settings.  It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App&#039;s domains.</span><script>if (typeof console !=="undefined" && console.log) console.log("Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings.  It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.");</script></div>

有一个开源服务 ngFacebook 查看一下

相关文章：