why does my directive throws $unknown provider

Question

unknown provider error: [$injector:unpr] http://errors.angularjs.org/1.4.3/$injector/unpr? p0=postbuttonsProvider%20%3C-%20postbuttons%20%3C-%20RandomBusinessCtrl

here is my code : the directive is defined as follows :

angular.module('home', ['ngAnimate', 'ui.bootstrap','ngDialog'])

.directive("postbutton", function(){
return {
    restrict: "E",
    bindToController: true,
    template: "<button>Post review</button>"        
}
})

.controller('RandomBusinessCtrl', 
    ['$scope','postbutton','pickRandomBusinesses','BusinessViewModel','config',
    function ($scope,postbutton,pickRandomBusinesses,BusinessViewModel,config) {

    });

my html is :

<div ng-controller="RandomBusinessCtrl">
<span class="badge pull-right" style="background-color:#CB525B;" >
      <postbuttons></postbuttons>
    <!-- <button type="button" value="post_business" style="background-color:#CB525B; height:15px;border:0px;`" ng-click="postReview(random_business.id,user_id,rate,price,date_created,details)">Post review</button> -->
  </span>

you cannot inject directive inside the controller......remove postbutton from RandomBusinessCtrl — naresh vadlakonda

dfsq dfsq · Accepted Answer · 2016-07-12T08:42:43

why does my directive throws $unknown provider

Because you are trying inject directive into controller. It doesn't make sense - you can only inject services.

Why directives are not injectable? Clearly, one might want to use its API from controller? Well, the reason why is the core or Angular app architecture. Directives being part of view layer of the application, should not be interacted from controller directly. Another important thing to understand is that services (what you inject) is intentionally singletones - while directives cannot be, of course.

In your case you don't need to worry about it: directive is registered on the same module so it's available in template.

Correct controller definition would be:

.controller('RandomBusinessCtrl' [
    '$scope', 'pickRandomBusinesses', 'BusinessViewModel', 'config',
    function ($scope, pickRandomBusinesses, BusinessViewModel, config) {

});

why does my directive throws $unknown provider

1 Answers