Directive not working in angularjs

Question

I am newbie to Angularjs. I am trying to create simple directive with the following code:

View:

<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<user-info></user-info>
</div>

</body>
</html>

Controller:

myapp = angular.module("myapp", []);    
myapp.directive('userInfo', function() {
    var directive = {};
    directive.restrict = 'E'; /* restrict this directive to elements */
    directive.template = "My first directive: ";
    return directive;
});

I am following this Tutorial to learn directive http://tutorials.jenkov.com/angularjs/custom-directives.html

I am getting error:

http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fnomod%3Fp0%3DmyApp%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A6%3A417%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A412%0A%20%20%20%20at%20a%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A53)%0A%20%20%20%20at%20w.bootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A296)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A35%3A46%0A%20%20%20%20at%20s%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20ab%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A38%3A135)%0A%20%20%20%20at%20d%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381

Here is my codepen link http://codepen.io/anon/pen/NGNKxz

you aren't including your own code in page. Follow link in error for more details. Also , using development version of angular.js will give more verbose error and stack trace output in console — charlietfl
– charlietfl, Commented Sep 16, 2015 at 13:46

Moncef Hassein-bey · Accepted Answer · 2015-09-16 13:57:58Z

3

You have error in the name of your app :

myapp = angular.module("myApp", []); // not 'myapp'

answered Sep 16, 2015 at 13:57

Moncef Hassein-bey

1,3619 silver badges14 bronze badges

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

1 Comment

Hardik Gondalia Over a year ago

Ok. That was my silly mistake. thank for help though

Joe Lloyd · Accepted Answer · 2015-09-16 13:59:19Z

1

Add Your Directive

You need to add the directive to your html like so

<script src="path/to/your/directive.js"></script>

or if your working from one module you will link to the main module. But please restructure your app like this it will keep code up to standard and clean.

I have a git hub repo where I am building an app in this structure here. Best of luck.

Note

You are using angular min. Min is great for production because its small and faster to load but your in development at the moment so use the full version so you can capture errors better with the browser console.

edited Sep 16, 2015 at 13:59

answered Sep 16, 2015 at 13:52

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

3 Comments

Hardik Gondalia Over a year ago

Thanks for your useful not. I'll try to get something from it

Joe Lloyd Over a year ago

It can really help with debugging if you add the full version. You get real errors in the console. But really chek out the app structure I've been working from. Hopefully I will have a directive up there soon.

Hardik Gondalia Over a year ago

Thanks. its really helpful for newbie.

Pedro Affonso · Accepted Answer · 2015-09-16 13:50:08Z

0

Looks like you did not declare the controller myCtrl. Your directive looks fine.

myapp.controller('myCtrl', function() {
});

answered Sep 16, 2015 at 13:50

Pedro Affonso

1,69616 silver badges26 bronze badges

3 Comments

Hardik Gondalia Over a year ago

Nope. it doesn't work. I have tried to add controller.

Pedro Affonso Over a year ago

Did you include your script? I don't see any <script> tags in your code @Arvaan

Hardik Gondalia Over a year ago

I added script for angularjs. I don't think so, I should add any script for directive

Kureb · Accepted Answer · 2015-09-16 13:58:50Z

0

Is it the current version of your html file ?

Because you might need to link your controller, between head tags, insert :

<script src="the js file which contains your controller"></script>

or

<script>Your controller</script>

edited Sep 16, 2015 at 13:58

answered Sep 16, 2015 at 13:53

Kureb

761 silver badge6 bronze badges

Collectives™ on Stack Overflow

Directive not working in angularjs

4 Answers 4

1 Comment

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related