CODEWITHSUNDEEP
angularjs
ankakusu
ankakusu

Reputation: 1828

A misunderstood part at AngularJS Directive

I found a angularJS thi code at JSFiddle. There are two directives called uiFoo and uiBar. When I compare those two directives I couldn't find a difference. However, when I run the code, the div with the directive uiFoo does not make a difference at the html output.

The ui-foo div is initially:

<div ui-foo>I should change iamfoo</div>

When the code is run, result(output html) is also

I should change iamfoo

The ui-bar div is initially:

<div ui-bar>I should change iambar</div>

However, when the code is run, result(output html) is

iambar

What makes this difference? What am I missing?

Thanks anyway... :D

Upvotes: 0

Views: 43

Answers (3)

JJJ
JJJ

Reputation: 340

The original directives were broken, the first was not being called as the second was overriding it due to re-defining the module.

See this fiddle.

When you reuse the same module, you should only pass the dependencies once, like so:

angular.module('my.module', []);
angular.module('my.module').directive(...);
angular.module('my.module').directive(...);

Upvotes: 1

Eduard Gamonal
Eduard Gamonal

Reputation: 8031

That's because the directives module is being defined twice.

angular.module('ui.directives', []) defines the module angular.module('ui.directives') uses the module

http://jsfiddle.net/A8Vgk/587/

Upvotes: 1

Michael Kang
Michael Kang

Reputation: 52847

Your second module definition is overwriting your first. So after its overwritten, the first directive is no longer defined.

To fix this, just use the module method for uiBar without the second parameter:

 angular.module('ui.directives').directive('uiBar', function() { ... });

Upvotes: 1

Related Questions