使用Angularjs在多个博客帖子(异步)中发表评论

时间:2014-03-25 16:38:53

标签: angularjs disqus

您好我正在使用angularjs和bootstrap创建我的个人博客。我正在尝试配置Disqus的评论。但问题在于,所有帖子都显示了相同的评论。我正在使用angularjs指令进行Disqus。

<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,改变博客的一切都在改变,但没有任何反应。

1 个答案:

答案 0 :(得分:2)

我一直在研究类似的技术,并且遇到了和你一样的问题。

迈克尔·布罗姆利(Michael Bromley)有一份关于Angular SPA的消息的自定义指令可以帮助你解决问题。 Github page

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

设置hashbang网址

这是DISQUS的一个先决条件,因此无法得到帮助。它似乎只承认hashbang网址。

在您的路线配置中,添加:

  

$ locationProvider.hashPrefix(&#39;!&#39);

这应该为您提供xxxxx.com/!#xxxxx/xxxx类型的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>

这应该做:)