Javascript 指令中的模板不'；不出现_Javascript_Angularjs_Angularjs Directive

Javascript 指令中的模板不'；不出现

javascript angularjs

Javascript 指令中的模板不'；不出现,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我是AngularJS的新手，正在学习指令。我使用了来自egghead.io的教程，并坚持使用以下示例： <html> <head lang="en"> <script type = "text/javascript" src = "../libs/angular/angular.js" ></script > <script type = "text/javascript" src = "example.js" >&l

我是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>'
   }    
})

var-app=angular.module（'phoneApp'，[]）；
应用程序控制器（'phoneCtrl'，函数（$scope）{
});
app.directive（'phoneDir'，function（）{
返回{
限制：“E”，
模板：“面板”
}    
})

这是一个非常简单的例子，只是尝试在HTML中使用一个指令。问题是我没有看到div在模板中定义了“Panel”。有人能帮忙吗？

尝试添加replace:true属性。我想这会解决你的问题

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

app.directive（'phoneDir'，function（）{
返回{
限制：“E”，
替换：正确，
模板：“面板”
}    
})

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

使用

指令大小写仅在代码中，在markup@doodeec：是的，解决了。如果你能将此作为答案发布，我将关闭此。谢谢替换刚才的集合，无论是在标记中添加模板，还是在markupdoodeec中显示模板而不是标记，都是完全正确的。我完全忽略了这一点。您需要在标记中连字符连接元素的名称，而不是使用驼峰大小写（仅在HTML中）。

<phone-dir>