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/

Answer 1

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.