2014-03-25 50 views
0

嗨我創建我的個人博客使用angularjs和bootstrap。我正在嘗試對Disqus進行註釋。但問題是,所有帖子都顯示相同的評論。我正在使用Disqus的angularjs指令。相同的評論在多個博客文章(異步)使用Angularjs

<div ng-disqus 
     disqus-shortname="abhishekprakashcom" 
     disqus-identifier="{{ blog.TITLE }}" 
     disqus-title="{{ blog.TITLE }}" 
     ready-to-bind="{{ contentLoaded }}"> 
</div> 

我已經使用了指令從here。我所做的唯一修改是將指令從元素更改爲屬性。

我真的很努力。最初我試圖直接嵌入腳本,但它也不起作用。你可以檢查我的blog(它沒有指令的實現,因爲我試着在我的本地主機相同)

請讓我知道是否需要進一步澄清。

謝謝。

這是Batrang

 { 
     disqus_shortname: abhishekprakashcom 
     disqus_identifier: 3 
     disqus_title: Another Test. 
     disqus_category_id: 3 
     readyToBind: true 
     disqus_url: null 
     disqus_disable_mobile: null 
    } 

輸出我加入disqus_category_id以及和每一件事情正在改變改變了博客,但沒有任何反應。

+0

好像你只是使用相同標識符 - 'disqus標識符=「{{article.id}}' - - 或者你的變量只能設置一次... –

+0

但是disqus-identifier =「{{blog。TITLE}}應該隨着標題每次加載新博客而發生變化。 –

+0

是的,下一次所有變量都重置爲空。用Batrang輸出編輯該問題 –

回答

2

我一直在研究類似的一套技術,並陷入了和你一樣的問題。

邁克爾布羅姆利爲Angular SPA提供了一個自定義指令,可以幫助您解決問題。 Github page

============================================= ===================================== IMP:

設置hashbang的URL。

這是DISQUS的一個先決條件,因此不能得到幫助。它似乎只認可hashbang網址。

在你的路線配置

,添加:

$ locationProvider.hashPrefix( '!')

這應該會給你一個xxxxx.com/!#xxxxx/xxxx類型的URL。

你也可以爲乾淨的URL添加$locationProvider.html5Mode('true'),但這種體驗與DISQUS(我的個人觀點)有點兒錯誤。

URL設置完成後,這是他創建的指令,將其複製到您存儲指令的任何位置。

.directive('dirDisqus', function($window) { 
return { 
    restrict: 'E', 
    scope: { 
     disqus_shortname: '@disqusShortname', 
     disqus_identifier: '@disqusIdentifier', 
     disqus_title: '@disqusTitle', 
     disqus_url: '@disqusUrl', 
     disqus_category_id: '@disqusCategoryId', 
     disqus_disable_mobile: '@disqusDisableMobile', 
     readyToBind: "@" 
    }, 
    template: '<div id="disqus_thread"></div><a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>', 
    link: function(scope) { 

     scope.$watch("readyToBind", function(isReady) { 

      // If the directive has been called without the 'ready-to-bind' attribute, we 
      // set the default to "true" so that Disqus will be loaded straight away. 
      if (!angular.isDefined(isReady)) { 
       isReady = "true"; 
      } 
      if (scope.$eval(isReady)) { 
       // put the config variables into separate global vars so that the Disqus script can see them 
       $window.disqus_shortname = scope.disqus_shortname; 
       $window.disqus_identifier = scope.disqus_identifier; 
       $window.disqus_title = scope.disqus_title; 
       $window.disqus_url = scope.disqus_url; 
       $window.disqus_category_id = scope.disqus_category_id; 
       $window.disqus_disable_mobile = scope.disqus_disable_mobile; 

       // get the remote Disqus script and insert it into the DOM 
       var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
       dsq.src = '//' + scope.disqus_shortname + '.disqus.com/embed.js'; 
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
      } 
     }); 
    } 
}; 

});

在HTML頁面中:

<dir-disqus disqus-shortname="xxxxxxx" 
        disqus-identifier={{scope.Title}} 
        disqus-title={{scope.Title}} 
        disqus-url={{scope.url}} /* I set window.location.href in my controller to pass the url*/ 
        readytobind="true"> 
     </dir-disqus> 

這應該做:)

+0

我已經將網址更改爲hashbang格式。但現在我越來越無法加載Disqus。如果您是版主,請參閱我們的故障排除指南。事實上,自從最近2天以來,我做了一些修改後,我得到了這個錯誤..我無法弄清楚我做了什麼。 –

+0

它沒有任何效果。 –

+0

我在我的本地主機上檢查,當我在我的服務器上測試它的工作。非常感謝:) –