kirstein / angular-disqus

A set of directive(s) and services for disqus to simplify the life of developers.

angular-disqus

angular.js and disqus integration made easy

A set of directive(s) and services to simplify the life of developers.

NOTICE!

This library is no longer activly maintained by me. However, If you feel like you should be the one who will continue maintaing it then please contact me.

Getting started

---

(1) Add ngDisqus to required modules list:

   var myApp = angular.module('myApp', ['ngDisqus']);

(2) Register your shortname:

This is the unique identifier assigned to your Disqus app, can be found on disqus.com > Admin. https://shortname.disqus.com

   myApp.config(function($disqusProvider){
      $disqusProvider.setShortname(shortname);
   });

(3) Add comments to threads by using the disqus directive:

    <!-- directive can be used as an attribute -->
    <div disqus="id"></div>

    <!-- directive can be used as a class attribute -->
    <div class="disqus: id"></div>

Additional Changes

---

Disqus will only work on sites which use hashbang ( #! ). A valid url looks like this, http://localhost:8000/#!/home/comments/10

Update config block liks this:

   myApp.config(function($disqusProvider, $locationProvider){
      $locationProvider.hashPrefix('!');
   })

This changes your link from http://localhost:8000/#/home/comments/10 to the valid form above.

Disqus identifiers

---

Disqus identifiers must be passed to the directive as as expressions. If the plan is to pass a variable then one must make sure that the variable is wrapped in ' apostrophes (disqus="'id'"")

Comment count

---

Angular-disqus will display comment using the data-disqus-identifier attribute.

Normal Link:

  <a href="#!/home/comments/10" data-disqus-identifier="randomString"></a>

Ui router:

  <a ui-sref="home.comments.view({id: video.id})" data-disqus-identifier="randomString"></a>

This will replace the content of the anchor tag with given comment count.

There is some talk of this in the disqus spec

API

---

1. $disqus#getShortname getter for the current shortname
2. $disqus#comment will reset comments (or generate comments if needed)
3. $disqusProvider#setShortname setter for shortname
4. $loadCount initiates the thread comment count loading (generally should not be used)

Devel

---

  npm install
  bower install angular-disqus --save
  grunt test
  grunt build

License

---

MIT

angular-disqus's Issues

Does not seem to work at all anymore

I tried using this and it doesn't seem to recognize $disqusProvider at all

Here is what I did:

1. bower install angular-disqus --save

2. added ngDisqus

3. tried to register the shortname.

(function(){

        'use strict';

        var dependencies = [
                'ghpg',
                'ngRoute',
                'ngDisqus'
        ];

        angular.module('blogger', dependencies)
        .config(Config);

        Config.$inject = ['$locationProvider', '$disqusProvider'];

        function Config($locationProvider){

                $locationProvider.hashPrefix('!');
                $locationProvider.html5Mode('true');
                $disqusProvider.setShortname('codeisdead');
        }

        if (window.location.hash === '#_=_'){
                window.location.hash = '#!';

        }


        //bootstrap angular

        angular.element(document).ready(function(){

                angular.bootstrap(document, ['blogger']);

        });



})();

Here is the error:

Failed to instantiate module blogger due to:
ReferenceError: $disqusProvider is not defined
    at Config (http://127.0.0.1:8080/angular/app.js:19:3)
    at Object.invoke (http://127.0.0.1:8080/js/lib/angular/angular.min.js:41:372)
    at d (http://127.0.0.1:8080/js/lib/angular/angular.min.js:39:321)
    at http://127.0.0.1:8080/js/lib/angular/angular.min.js:39:445
    at q (http://127.0.0.1:8080/js/lib/angular/angular.min.js:7:355)
    at g (http://127.0.0.1:8080/js/lib/angular/angular.min.js:39:222)
    at bb (http://127.0.0.1:8080/js/lib/angular/angular.min.js:43:246)
    at c (http://127.0.0.1:8080/js/lib/angular/angular.min.js:21:19)
    at Object.yc [as bootstrap] (http://127.0.0.1:8080/js/lib/angular/angular.min.js:21:332)
    at HTMLDocument.<anonymous> (http://127.0.0.1:8080/angular/app.js:32:11

Disqus showing the same thread

I have followed README and added following on my page template

   <div disqus="app._id"></div>

However, no matter which page I visit (with different app._id), I see the same Disqus thread. Is there a common cause of this problem?

Comment count

When I try the snippet from the README (with my settings of course) to show the comment count, I get the following javascript error:

Uncaught TypeError: Cannot call method 'appendChild' of null

in embed.js: 1.

This may be a disqus issue, but i simply don't know. Does it matter that I use the following (Jade) in a ng-repeat DIV?

a.title(ng-href="#!/news/{{item.id}}") {{item.title}}
a.label(ng-href="#!/news/{{item.id}}", data-disqus-identifier="{{item.id}}")  

Unable to get disqus to work properly

I've been unable to get this working properly, and have tried to following the instructions as best I could, however they are a bit lacking. A full example would go a long way!

I have followed the steps like this:

1.) angular.module('myApp', [ …, 'ngDisqus' ]);

2.) I could not get $disqusProvider.setShortname('shortname'); to work as I kept getting an exception stating that shortname is undefined, so used window.disqus_shortname

3.) I have tried to get my page_id into

without much luck.

I have tried disqus="{{ page_id }}" and disqus="page_id" and every combination I can think of without any luck.

If I hardcode an id eg: 7, disqus loads, however if I use another id, eg: 8 and open a different page, it loads the same discussion.

I see there is a function function setGlobals(id, url, shortname), but I'm unable to call it. Is this needed?

This looks like a very handy bit of code, but I am highly confused about how to use it, I would appreciate any help!!

Use provider instead of window.shortname

It'd be great if this used a provider instead of window.shortname. This would allow the shortname to be defined within .config() in our applications to maintain good application structure.

Can't add the <script> to <head>

It's a good plugin! :)
I use it for my blog, but I can't load disqus comment.
I debuged and I think it don't add the script tag to <head>.

BTW, I manually added the <script src="http://go.disqus.com/embed.js"></script> to <head> and it load the disqus comment successfully, but the disqus comment is for http://moeloli.me rather than http://moeloli.me/#!/article/xxxxxx.

Thank you!

angular-disqus in official bower registry ?

Is there any reason why the project is not in the bower registry ? =)

Unable to get disqus working

I'm trying to use this module on my examples page: http://bkuhl.github.io/ng-form-ui/#!/slide-toggle

I seem to be unable to get things working correctly but am also not seeing any errors. I've set everything up according to the "Getting Started" section.

Update: I had this problem prior to the v1.0 release

License?

Hi, is there a license you want to apply to the repo?

Get comments count?

Hello! Can you help me to get comments count with this plugin?
Is this plugin has some method to help me with that?

Per Page option

Hi I would like to ask how to set 'per page' to limit the initial comments shown on load?

Set Page Title

When i use angular-disqus on my SPA, and someone writes a comment, the comment's title is not set. It would be nice to be able to specify the title of the current "page" directly on the directive.

Plugin does not work properly with ngAnimate

When you move from one post to another, like from test 1 page to test 2 page, with ngAnimate, I see that the plugin is not working properly.

Not working with ng-repeat

I'm trying to display the discussion after each article on the page. But it is shown only on the first article.

  <main class="container container-last bg-transparent-white padding3">
    <div class="row" ng-repeat="nomine in battleTatamiController.nomines" class="nomine-entry">
     ...

            <div class="row">
              <div class="col-xs-12">
               <div disqus="photoshop-battle"></div>
              </div>
            </div>

          </section>
        </article>
        <hr/>
      </div>
    </div>

  </main>