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

问题描述

下面是我的AngularJs指令。其预计将显示在模板的股利，但它同时code运行没有任何显示。

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

下面是HTML

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

下面是AngularJS指令

Here is the AngularJS directive

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

这里是演示

推荐答案

当你宣布你的指令，您使用的名称超人，然而这是错误的。您应该使用超人作为将被转换为超级男人作为元素。

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.

在指令名中的任何大写字母将转化为一个连字符，如大写字母不中的元素使用。例如 myDirective 将转化为我-指令。

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.

正如其他人所说，AngularJS使用正常化以下规范化规则：

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

地带x和从元件的正面数据 - /属性。兑换
  中：， - 或_分隔的名字驼峰

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

JavaScript的：

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 。

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