CODEWITHSUNDEEP
angularjsangularjs-directive
AMG
AMG

Reputation: 704

Simple directive not working

Trying to create a directive for my header but it does not seem to work. I have the following:

.directive("headerStandard", function() {
    return {
        restrict: "E",
        template: "test"
    };
    })

This is within an angular module called myApp.directives which also contains other pre-installed directives from a template, which do work.

And in my index.html page (which also references the correct address of the JS file directives) I try:

<headerStandard></headerStandard>

Can it be more simpeler than this? What am I overlooking?

Upvotes: 1

Views: 84

Answers (2)

ryeballar
ryeballar

Reputation: 30098

You need to change the markup from:

<headerStandard></headerStandard>

to

<header-standard></header-standard>

This is because Angular's HTML Compiler normalizes the directive's name from camel case form to dash-delimited form (tag name or attribute), read more about it in the developer's guide.

Upvotes: 3

A.B
A.B

Reputation: 20445

The actual name of directive converts to Camel case form in directive() function

Second Word of Directive with capital first letter becomes small proceeding with a hyphen,So on all next Capital first letters will become small and will be preceded with hyphen like yourCustomDirective becomes your-custom-directive

here,headerStandard becomes header-standard in view

so in view you need to use it as

<header-standard></header-standard>

Upvotes: 1

Related Questions