AngularJS + Facebook的類似指令不能正常工作

即時通訊開發一個應用AngularJs至極集成FB-就像在一個視圖。它只是第一次工作，如果我也刷新瀏覽器，當我導航到其他視圖和回滾插件不起作用。AngularJS + Facebook的類似指令不能正常工作

我創建了一個指令。

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>

我一直在尋找其他的選項，但是沒有幸運。

我不知道什麼是錯。

謝謝你這麼多

來源

2013-09-26 schwertfisch

演示你有沒有想出解決辦法？我遇到了同樣的問題 – rob

@rob您好，是的，我最喜歡使用Facebook用戶界面。所以我在應用程序中包含了angular-easyfb.js模塊。然後你把你喜歡的btn在界面

希望它可以幫助你 – schwertfisch

我發現的最佳解決方案是將ezfb模塊添加到我的應用程序，現在它工作得很好。

我完全推薦這個模塊。

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

上有Plunker Demo

Github Link

來源

2014-02-19 14:46:34 schwertfisch

我試過用exfb。似乎仍需要刷新以使插件重新呈現動態路徑。笨重的人似乎表明，它應該只是工作（FB像按鈕插件）。 – Chaddeus

具體來說： ezfb.init（）如果您不想（或者您不能）在配置階段配置您的FB.init參數，您可以在運行階段使用ezfb.init。在調用ezfb.init之前，任何ezfb API調用都不會運行。 angular.module（ '對myApp'） .RUN（函數（ezfb）{ ezfb.init（{// 這是我plunker演示應用程序的appid FB應用程序ID： '386469651480295' }）; }）; – charneykaye

有一個開源的服務ngFacebook檢查出來

來源

2013-09-26 17:16:58

它沒有像facebook那樣的facebook。 –

你應該能夠做，因爲簡單的東西：

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>

來源

2013-11-03 23:21:56

另外請注意，在你的模板中你可以避開引號。您可以通過用單引號括起模板字符串來避免這種情況。 –

謝謝我的朋友。 – schwertfisch

AngularJS + Facebook的類似指令不能正常工作

回答

相關問題