How to inject third party dependencies into Directive controllers in Angularjs?

Question

I have a directive controller as follows.

 app.directive("dashboardApp", function(toastr){
 return {
     controller: function($scope, $rootScope){

     }
  }

I also have an XHR interceptor 'angular-loading-bar' that is added as a dependency to 'app'

 angular.module('myApp', ['angular-loading-bar', 'ngAnimate'])

. But the interceptor isn't working in the dashboardApp controller. How do i inject this dependency into the directive controller.

Answer 1

It works automatically, so simply include it as a dependency and it will automatically display the progress of your $http requests.

Injecting the module into your application should do the trick. No need in injecting it into your controller.

Requirements: AngularJS 1.2+

Please check your installation, and re-check following steps

Include dependency

include the loading bar as a dependency for your app. If you want animations, include ngAnimate as well. note: ngAnimate is optional. Installation options here .

angular.module('myApp', ['angular-loading-bar', 'ngAnimate'])

Include source files (via one of the following methods)

include the supplied JS and CSS file (or create your own CSS to override defaults).

<link rel='stylesheet' href='build/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='build/loading-bar.min.js'></script>
That's it -- you're done!

via bower:

$ bower install angular-loading-bar

via npm:

$ npm install angular-loading-bar

via CDN:

 <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
 <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js'></scrip