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-和数据.将:, - 或_分隔的名称转换为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.