CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
ajmajmajma
ajmajmajma

Reputation: 14216

Angular, trouble getting directive to work

I seem to be having trouble getting my directive to work, I think I may be registering it incorrectly, but I can't seem to figuire out how. Possibly the naming convention? Here's what I have -

My Directive - 

'use strict';

angular.module('demoApp')
.directive('packeryAngular', ['$rootScope', '$timeout',
function($rootScope, $timeout) {
return {
  restrict: 'A',
  scope: true,
  link: function(scope, element, attrs) {

};

}
]);

On my div, I just call it like so 

<div packeryAngular>

However, when I call it just like this, nothing seems to be happening. My first assumption was that I needed to register on my app like so

angular.module('demoApp', [ 'packeryAngular ']

However, when I do that I get the error in the console of :

Error: [$injector:modulerr] Failed to instantiate module packeryAngular due to:
Error: [$injector:nomod] Module 'packeryAngular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

So, I'm pretty new to this but I'm not entirely sure what I'm doing wrong here, I've tried to copy other working examples and can't seem to get it working. Would appreciate any help, and thank you very much for reading!

Upvotes: 0

Views: 53

Answers (2)

A.B
A.B

Reputation: 20445

You dont need to inject the directive , you just need to use it in html .Second Word of Directive with capital first letter becomes small proceeding with a hyphen,So on all next Capital first letters will become small and will be preceded with hyphen like yourCustomDirective becomes your-custom-directive

<div packery-angular>

get rid of injecting it in module

angular.module('demoApp', []);

Upvotes: 3

sboisse
sboisse

Reputation: 5498

You must put the following attribute on your node:

<div packery-angular>

When registering your directives, your names must use the lower camel case form. But HTML does not deal well with upper case letters in attribute names, so AngularJS expects upper case letters to be replaced by a dash followed by their corresponding lower case letter.

So your directive name in javascript code is yourDirectiveName, but in the HTML code, it must be referred as your-directive-name.

Upvotes: 2

Related Questions