javascript - AngularJS 指令不显示模板

Question

这是我的 AngularJs 指令。它预期会在模板中显示 div，但在代码运行时它什么也没显示。

这是html

<div ng-app="SuperHero">
    <SuperMan></SuperMan>
</div>

这是 AngularJS 指令

var app = angular.module('SuperHero',[]);
app.directive('SuperMan',function(){
    return{
        restrict:'E',
        template: '<div>Hello fromt Directive</div>'
    }
});

这里是 demo

Answer 1

当您声明您的指令时，您使用了名称 SuperMan，但这是错误的。您应该使用 superMan 因为它将被转换为 super-man 作为元素。

指令名称中的任何大写字母都将转换为连字符，因为元素中不使用大写字母。例如 myDirective 将转换为 my-directive。

正如其他人所提到的，AngularJS 使用以下规范化规则进行规范化:

Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase.

JavaScript:

var app = angular.module('SuperHero',[]);
app.directive('superMan',function(){
    return{
        restrict:'E',
        template: '<div>Hello fromt Directive</div>'
    }
});

HTML:

<div ng-app="SuperHero">
    <super-man></super-man>
</div>

我更新了你的 fiddle 以匹配此处的正确语法 jsfiddle .