I encountered an issue with the AngularJS code below:
"angular.js:13550 TypeError: Cannot read property 'compile' of undefined" for the code-
HelloWorld.html
<!DOCTYPE html>
<html ng-app="module1">
<head>
<title>My First Custom Directive</title>
<script src="../angular.js"></script>
<script src="helloworldDirective.js"></script>
</head>
<body>
<hello-world></hello-world>
</body>
</html>
helloWorldDirective.js-
(function() {
var module1=angular.module('module1',[]);
module1.directive('helloWorld',function(){
return
{
template:'Hello Somesh!!Keep it up.'
};
});
}());
However, by replacing the JavaScript file with the following code, the issue was resolved:
(function() {
var module1=angular.module('module1',[]);
var helloWorld=function()
{
var directive={};
directive.template='Hello Somesh!!Keep it up.';
return directive;
}
module1.directive('helloWorld',helloWorld);
}());
It's interesting that both codes are essentially doing the same thing yet one is failing. Any ideas on why this might be happening?