AngularJS directives erroring out - Cannot read property 'compile' of undefined

Question

Newbie to AngularJS and trying to create a simple directive. The code fails with a TypeError: Cannot read property 'compile' of undefined. Any suggestions would be greatly appreciated.

JS

var xx = angular.module('myApp', []);
xx.directive('myFoo', 
             function(){
                 return 
                 {
                     template:'23'
                 };                     
});

HTML

<div ng-app="myApp">
<div my-foo></div>
</div>

You can find the code and error here https://jsfiddle.net/p11qqrxx/15/

New to AngularJS. Is this syntax angularjs 1.0? I am using AngularJS 1.2 — user275157
– user275157, Commented Apr 10, 2015 at 3:36

Hatman · Accepted Answer · 2015-11-03 10:31:14Z

36

It's just your return statement.

Bad:

return 
{} // This returns undefined, return is odd and doesn't look at the next line

Good:

return{
} // Returns an empty object, always open your object on the same line as the return

Better:

var directive = {};
return directive; // How I always do it, to avoid the issue.

edited Nov 3, 2015 at 10:31

Hatman

211 silver badge5 bronze badges

answered Apr 9, 2015 at 18:32

Dylan Watt

3,38715 silver badges17 bronze badges

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

5 Comments

Pankaj Parkar Over a year ago

could you please explain with fiddle?

Dylan Watt Over a year ago

This explains the basics of what i'm saying: jsfiddle.net/L6kmcbnL . The issue here has nothing to do with angular, really, just how javascript works. .directive expects an argument of a function that returns a configuration object for a directive. The original question's function returns undefined rather than the config object.

Pankaj Parkar Over a year ago

reproduce it with directive..I'll appreciate it

Dylan Watt Over a year ago

This is the best I can do without wasting a massive amount of time: jsfiddle.net/h3oyzktj . It doesn't demo it great, the whole return thing is a syntax error, which breaks the JS, so its not possible to demo both working and not at the same time. If you put the brace on line 8 beside the return on line 7, everything works. The best I can do for now. Ignore the settimeout manual boostrapping of two apps, I was trying to get them to both work and be broken at the same time.

user275157 Over a year ago

It was the return...Can't believe that I spent close to 3 hours on this. Once I fixed the return statement it started working.

Shivprasad Koirala · Accepted Answer · 2016-01-01 12:54:07Z

This is not a issue of Angular but its the way javascript return syntaxes are written and executed. I have created a simple video which demonstrates this issue in more detail. You can see this video from this link.

https://www.facebook.com/shivprasad.koirala/videos/910570055693818/

Now for the long answer. In javascript "return" and "return ;" are one the same and "{}" is a anonymous function.

When you write return and "{" in the next line its two statements one return and the "{}" is a anonymous function.Program returns from the "return" syntax and the code inside the curly bracket is never executed or we can say its a unreachable code.So it returns back "undefined".

return  // returns from this step itself
{
  // any code here will never execute
 // unreachable code
}

When you write the curly bracket just after return statment it treats them as one block of code and also executes the code inside the curly bracket.

return{
// any code here will execute
}

So its all about where your curly bracket is after the return statement.

Pankaj Parkar · Accepted Answer · 2015-04-09 18:49:00Z

0

You also referred AngularJs 1.0.0 which was too old, I updated it to 1.1

Change directive to this

xx.directive('myFoo',

function () {
    return {
        restrict: 'A', //defaults its A no need of it to declare.
        template: '23'
    };
});

Working Fiddle

edited Apr 9, 2015 at 18:49

answered Apr 9, 2015 at 18:28

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

ravinder · Accepted Answer · 2017-03-24 12:05:06Z

0

xx.directive('myFoo',

function () { var obje={ restrict: 'A', //defaults its A no need of it to declare. template: '23' return obje; } });

answered Mar 24, 2017 at 12:05

ravinder

1

Collectives™ on Stack Overflow

AngularJS directives erroring out - Cannot read property 'compile' of undefined

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related