Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
44 lines (33 sloc) 1.88 KB
title author type date aliases categories tags
Using Disqus with AngularJS
michael-bromley
post
2014-01-24 16:41:37 +0000
blog/34/using-disqus-with-angularjs
post
AngularJS
code
JavaScript

Getting the comments platform Disqus to work with your Angular-based website is probably not going to be as simple as dropping in the default Disqus code snippet into your HTML template.

Due to the way Angular loads its templates, it is likely that the Disqus script will not get executed and you won't see the comments box on your page.

I searched on Google to see if there was a documented way to get Disqus to work with Angular, and I came across this project on GitHub. Unfortunately it has the requirement that you need to use hashbang (#!) URLs in order to make it work, and also it seemed a bit more than I needed. I just wanted a very simple solution to getting a Disqus widget on my page.

So I wrote a custom directive for Angular that makes adding Disqus to your page as simple as:

<dir-disqus disqus-shortname="YOUR_DISQUS_SHORTNAME"></dir-disqus>

You can also specify any custom config values like so:

<dir-disqus disqus-shortname="YOUR_DISQUS_SHORTNAME"
        disqus-identifier="{{ article.id }}"
        disqus-title="{{ article.title }}"
        ...>
 </dir-disqus>

As you can see in the example above, you can use Angular's data binding to dynamically specify the Disqus config options. Also of note is that you don't need to do any kind of configuration in your JavaScript code. It's all done through the "API" set up by the directive itself, via the attributes.

For full documentation and code, check it out in my Angular Utilities repo on GitHub.

I hope others find this useful too!

 

You can’t perform that action at this time.