Question

我是AngularJS的新手并且正在学习指令。我使用了egghead.io的教程，并坚持使用以下示例：

<html>
<head lang="en">
    <script type = "text/javascript" src = "../libs/angular/angular.js" ></script >
    <script type = "text/javascript" src = "example.js" ></script>
</head>
<body>

    <div ng-app="phoneApp">
        <div ng-controller="phoneCtrl">
           <phoneDir></phoneDir>
    </div>
</div>
</body>
</html>

example.js包含：

var app = angular.module('phoneApp',[]);

app.controller('phoneCtrl',function($scope) {

});

app.directive('phoneDir',function() {
    return {
        restrict:"E",
        template:'<div> Panel </div>'
   }    
})

这是一个非常简单的例子，它只是试图在HTML中使用指令问题是我没有看到div有＆＃39; Panel＆＃39;在模板中定义。有人可以帮忙吗？

Answer 1

指令仅在代码中使用camelCase名称，标记使用带连字符的名称

使用

<phone-dir>

Answer 2

尝试添加replace：true属性。我认为这将解决您的问题。

app.directive('phoneDir',function() {
return {
    restrict:"E",
    replace: true,
    template:'<div> Panel </div>'
 }    
})

指令中的模板不会出现

2 个答案: