Question

AngularJS的新手并尝试创建一个简单的指令。代码失败了 TypeError：无法读取undefined的属性'compile'。任何建议将不胜感激。

JS

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

HTML

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

您可以在https://jsfiddle.net/p11qqrxx/15/

找到代码和错误

Answer 1

这只是你的回复陈述。

为：

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

好：

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

更好：

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

Answer 2

这不是Angular的问题，而是javascript返回语法的编写和执行方式。我创建了一个简单的视频，更详细地演示了这个问题。您可以通过此链接看到此视频。

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

现在回答很长的问题。在javascript中“返回”和“返回”;是一个相同的“{}”是一个匿名函数。

当你写下return并且“{”在下一行中时它的两个语句返回一个而“{}”是一个匿名函数。程序从“return”语法返回，并且大括号内的代码永远不会被执行或我们可以说它是一个无法访问的代码。所以它返回“未定义”。

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

当您在返回语句之后编写大括号时，它会将它们视为一个代码块，并执行大括号内的代码。

return{
// any code here will execute
}

所以关于你的大括号在return语句之后的位置。

Answer 3

您还提到过年龄太大的AngularJs 1.0.0，我将其更新为1.1

将指令更改为此

xx.directive('myFoo',

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

Working Fiddle

Answer 4

xx.directive（ 'myFoo'，

function（）{ var obje = { restrict：'A'，//默认为A，不需要声明它。模板：'23' 返回目标; } }）;

AngularJS指令错误输出 - 无法读取属性＆＃39;编译＆＃39;未定义的

4 个答案: