AngularJS: Directive can not find dependency injected

Question

Here is my plunker - http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview

I am trying to inject Angular Strap

The index.html is including the right dependencies and in correct order

<script data-require="jquery@*" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script data-require="[email protected]" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script data-require="[email protected]" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script data-require="[email protected]" data-semver="0.6.6" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.6.6/angular-strap.min.js"></script>

My console says

Error: Unknown provider: $strap.directivesProvider <- $strap.directives <- notificationDirective
@http://code.angularjs.org/1.1.5/angular.min.js:29
c@http://code.angularjs.org/1.1.5/angular.min.js:27
@http://code.angularjs.org/1.1.5/angular.min.js:30
c@http://code.angularjs.org/1.1.5/angular.min.js:27
d@http://code.angularjs.org/1.1.5/angular.min.js:27
@http://code.angularjs.org/1.1.5/angular.min.js:37
forEach@[native code]

Dan · Accepted Answer · 2013-05-29 06:56:04Z

3

The module dependency for AngularStrap is listed in the wrong place. '$strap-directives' is a module dependency, not a service dependency, so it needs to be listed during the app bootstrap like:

var app = angular.module('myApp', ['$strap.directives']);

It also needs to be removed as a service DI in your directive:

app.directive('notification', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {
            ngModel: '='
        },
        template: '<div>Test</div>'
    }
});

This is the way they configure the Plunkers on the AngularStrap site as well.

edited May 29, 2013 at 6:56

answered May 29, 2013 at 6:22

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

callmekatootie · Accepted Answer · 2013-05-29 12:33:03Z

1

$strap.directives is a module. You need to define it as a dependency for your own module:

var app = angular.module('myApp', ['$strap.directives']);

You need not inject this into the directive. Thus your directive will only look like:

app.directive('notification', function(){
  return {
    restrict: 'E',
    replace: true,
    scope: {
      ngModel: '='
    },
    template: '<div>Test</div>'
  }
});

edited May 29, 2013 at 12:33

answered May 29, 2013 at 6:24

callmekatootie

11.2k16 gold badges74 silver badges109 bronze badges

1 Comment

Dan Over a year ago

This will throw an error because the directive tries to inject strap unsuccessfully

Collectives™ on Stack Overflow

AngularJS: Directive can not find dependency injected

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related