AngularJS 指令不显示模板 [英] AngularJS directive not displaying the template

问题描述

这是我的 AngularJs 指令.它希望在模板中显示 div，但在代码运行时它什么也没显示.

这是html

<超人></超人>

这里是 AngularJS 指令

var app = angular.module('SuperHero',[]);app.directive('超人',function(){返回{限制:'E'，模板:'<div>Hello fromt Directive</div>'}});

这是演示

解决方案

当您声明指令时，您使用了名称 SuperMan，但这是错误的.你应该使用 superMan 因为它会被翻译成 super-man 作为元素.

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

正如其他人提到的，AngularJS 使用规范化遵循以下规范化规则:

<块引用>

从元素/属性的前面去除 x- 和 data-.转变以 :、- 或 _ 分隔的名称以驼峰命名.

JavaScript:

var app = angular.module('SuperHero',[]);app.directive('superMan',function(){返回{限制:'E'，模板:'<div>Hello fromt Directive</div>'}});

HTML:

<超人></超人>

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

Here is my AngularJs directive. Its' expected to show the div in the template but it shown nothing while the code is run.

Here is the html

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

Here is the AngularJS directive

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

And here is the demo

解决方案

When you declare your directive you used the name SuperMan, however this is wrong. You should use superMan as that will be translated to super-man as the element.

Any capital letter in the directive name will translate to a hyphen, as capital letters are not used in elements. For example myDirective will translate to my-directive.

As mentioned by others, AngularJS uses normalisation the following normalisation rules:

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>

I updated your fiddle to match the correct syntax here jsfiddle.

这篇关于AngularJS 指令不显示模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！