CODEWITHSUNDEEP
angularjsangularjs-directive
3gwebtrain
3gwebtrain

Reputation: 15303

AngularJS directive not injecting & giving error

I am trying to inject a directive, but I am getting some error. Actually, I have declared the modules as the array, and pushing to the app, but still not working.

here is my code :

var appModules = ['app.directives', []]

var app = angular.module('plunker', appModules);


app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});


angular.module('app.directives', []).directive('myContent', function(){

  return{

    link:function(scope, element, attrs){

      console.log("hi");

    }

  }

})

Live Demo

Upvotes: 0

Views: 460

Answers (4)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

Change your code in the following way:

// Define the name of the directive module
var directiveModule = 'app.directives';

// Create the directive module itself
angular.module('app.directives', []);

var appModules = [directiveModule];

// Create the main module
var app = angular.module('plunker', appModules);

// Add controller on the main module
app.controller('MainCtrl', function ($scope) {
    $scope.name = 'World';
});

// Register directive on the directives module
angular.module('app.directives').directive('myContent', function () {
    return {
        link: function (scope, element, attrs) {
            console.log("hi");
        }
    }
});

Remember: angular.module('some-name', []) create a new module with name some-name while angular.module('some-name') will use an existing module with name some-name and will throw exception if that module is not created before.

Upvotes: 1

Pravesh Khatri
Pravesh Khatri

Reputation: 2264

In appModules you cannot use blank array inside it.

Since It will not recognize the modules, inside that because an empty array exist there.

 var app = angular.module('plunker', ['app.directives', []]);

when we inject appModules directly, then it obviously give an error

Failed to instantiate module

because it does not recognize the empty array inside it.

 var appModules = ['app.directives'];

This is , what you have to use.

Upvotes: 1

Hadi
Hadi

Reputation: 17299

change var appModules = ['app.directives', []] to var appModules = ['app.directives']

Upvotes: 3

charlietfl
charlietfl

Reputation: 171669

The second argument of a module declaration is an array of the dependencies. but you have an extra empty array in the appmodules that you are passing to injection

Change

var appModules = ['app.directives', []]

to

var appModules = ['app.directives']

DEMO

Upvotes: 1

Related Questions