Facebook評論插件Angularjs

我在我的AngularJS應用程序中添加Facebook評論插件時遇到了一個奇怪的錯誤。應用頁面的簡化結構是Facebook評論插件Angularjs

<html ng-app="myapp"> 
<head> 
... 
</head> 
<body> 
<div> 
... 
</div> 
<div ng-view></div> 
... 
</body> 
</html>

與FB評論框的網頁以ng-視圖被加載。頁的包含FB評論框結構如下

<div id="fb-comment-box> 
<div class="fb-comments" data-href="http://mydomain.com/page/{{ page.id }}" data-numposts="5" data-colorsheme="light"></div> 
</div>

的page是它來自控制器angularjs範圍可變。當我在瀏覽器中加載此頁面並執行檢查元素時。它顯示了正確的頁面ID，即數據href是

data-href = "http://mydomain.com/page/2"

但低於FB評論框，Facebook的顯示以下錯誤

Warning: http://mydomain.com/page/%7B%7B%20page.id%7D%7D is unreachable.

我可以看到angularJS範圍變量不具有約束力。有誰知道如何解決這個問題？

來源

2014-05-07 Bibek Subedi

這可能是由於FB功能在Angular能夠改變data-href屬性之前踢的事實。

一個指令，好像這裏是不錯的選擇：

你基本上需要創建后角的註釋框能夠提供正確的URL。
因爲這涉及異步DOM操作，所以一旦data-href屬性發生更改，您需要使用FB.XFBML.parse()來讓FB處理註釋框。

的指令：

.directive('dynFbCommentBox', function() { function createHTML(href, numposts, colorscheme) { return '<div class="fb-comments" ' + 'data-href="' + href + '" ' + 'data-numposts="' + numposts + '" ' + 'data-colorsheme="' + colorscheme + '">' + '</div>'; } return { restrict: 'A', scope: {}, link: function postLink(scope, elem, attrs) { attrs.$observe('pageHref', function (newValue) { var href = newValue; var numposts = attrs.numposts || 5; var colorscheme = attrs.colorscheme || 'light'; elem.html(createHTML(href, numposts, colorscheme)); FB.XFBML.parse(elem[0]); }); } }; });

的HTML：

<div id="fb-comment-box" dyn-fb-comment-box page-href="https://example.com/page/{{page.id}}" numposts="5" colorscheme="light"> </div>

_{注：
該指令的範圍將不斷地監視在page-href屬性的變化和更新自己的評論框。你可以改變它來滿足你的需求（例如，也可以觀察其他屬性的變化，或者綁定一次並停止觀看）。}

還參見本short demo。

來源

2014-05-10 12:57:21 gkalpak

謝謝你的解釋和答案。我實現了你的代碼，但得到了以下錯誤：https://docs.angularjs.org/error/$parse/syntax?p0= –

我注意到錯誤並在幾分鐘前更新了答案。確保你複製更新後的答案。（不幸的是，我不能用真正的FB來測試它，所以我只是創建了一個模擬對象 - 希望它可以和真實對象一起工作。） – gkalpak

我添加了一個鏈接到demo-implementation（使用模擬FB只是輸出HTML）。 – gkalpak

Facebook評論插件Angularjs

回答

相關問題