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>'
    }
});

这是演示

Answer 1

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

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

正如其他人提到的，AngularJS使用以下标准化规则进行标准化：

从元素/属性的前面去除x-和data-。将：，-或_分隔的名称转换为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>

我更新了您的小提琴以匹配jsfiddle此处的正确语法。