Unable to inject directive as dependency in AngularJS

Question

I am learning to create directives and made them available via dependency add, but somehow it is not working, let me know what I am doing wrong.

Plnkr - http://plnkr.co/edit/Mk4h7XvSN2YA26JZZ9Ua?p=preview

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

  <head>
    <script src="https://code.angularjs.org/1.4.7/angular.js"></script>
    <script type="text/javascript" src="firstDirective.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl as vm">
    <div class="container">
        <simple-directive></simple-directive>   
    </div>  
  </body>
</html>

firstDirective.js

angular
    .module('firstdirective')
    .directive('simpleDirective', function(){
        return {
            scope: true, // inherit child scope from parent
            restrict: 'E',
            replace: true,
            template: '<h2>My first directive from dependency</h2>'
        };
    });

script.js

var myApp = angular.module('myApp', ['firstdirective']);
myApp.controller('mainCtrl', function(){
    var vm = this;
})

tasseKATT · Accepted Answer · 2015-12-20 08:02:04Z

3

To create a new module you need to pass an array of dependencies as the second argument:

angular.module('firstdirective', [])

Otherwise you are trying to retrieve the module.

answered Dec 20, 2015 at 8:02

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

Unable to inject directive as dependency in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related