AngularJS directive not displaying the template

Question

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

Solution 1

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.

Solution 2

Angular normalizes directives names - using camelCase in the directive and dash seperated (usually) since html isn't case sensitive, in the template.

so where you need to call the directive namedsuperMan with:

<super-man></super-man>

Here is a working Demo