javascript AngularJS 指令出错 - 无法读取未定义的属性“编译”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29546131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS directives erroring out - Cannot read property 'compile' of undefined
提问by user275157
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.
AngularJS 的新手并试图创建一个简单的指令。代码失败，出现类型错误：无法读取未定义的属性“编译”。任何建议将不胜感激。
JS
JS
var xx = angular.module('myApp', []);
xx.directive('myFoo',
function(){
return
{
template:'23'
};
});
HTML
HTML
<div ng-app="myApp">
<div my-foo></div>
</div>
You can find the code and error here https://jsfiddle.net/p11qqrxx/15/
你可以在这里找到代码和错误https://jsfiddle.net/p11qqrxx/15/
回答by Dylan Watt
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.
回答by Shivprasad Ktheitroadala
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.
这不是 Angular 的问题，而是它编写和执行 javascript 返回语法的方式。我创建了一个简单的视频，更详细地演示了这个问题。你可以从这个链接看到这个视频。
https://www.facebook.com/shivprasad.ktheitroadala/videos/910570055693818/
https://www.facebook.com/shivprasad.ktheitroadala/videos/910570055693818/
Now for the long answer. In javascript "return" and "return ;" are one the same and "{}" is a anonymous function.
现在是长答案。在javascript“返回”和“返回;”中 是相同的，“{}”是匿名函数。
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 和 "{" 时，它的两个语句一个 return 和 "{}" 是一个匿名函数。程序从 "return" 语法返回，大括号内的代码永远不会执行，或者我们可以说它是一个无法访问的代码。所以它返回“未定义”。
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 语句之后编写大括号时，它会将它们视为一个代码块，并且还会执行大括号内的代码。
return{
// any code here will execute
}
So its all about where your curly bracket is after the return statement.
所以这完全是关于你的大括号在 return 语句之后的位置。
回答by ravinder
xx.directive('myFoo',
xx.directive('myFoo',
function () { var obje={ restrict: 'A', //defaults its A no need of it to declare. template: '23' return obje; } });
function () { var obje={ restrict: 'A', //默认它的 A 不需要它声明。模板：'23'返回对象；} });
回答by Pankaj Parkar
You also referred AngularJs 1.0.0 which was too old, I updated it to 1.1
你还提到了太旧的 AngularJs 1.0.0，我将其更新为 1.1
Change directive to this
将指令更改为此
xx.directive('myFoo',
function () {
return {
restrict: 'A', //defaults its A no need of it to declare.
template: '23'
};
});
