Creating a simple directive with Angular

Question

I am having a very simple problem and I can't figure out why it's not working.

reviewCtrl.html

angular.module('liveAPP.review',['LiveAPP.factory'])
.controller('reviewCtrl', ['$scope','$http','dataFactory','$location',reviewCtrl])

.directive("datePicker", function() {
    return {
        restrict: "E",
        template: '<div>I want this to show up in my review view</div>'
  }      
})

review.html

<datePicker></datePicker>

My expectation of this code is to see "I want this to show up in my review view" in the view corresponding to this controller. The view is injected into the <div ng-view></div> in my index.html. I have a very simple example here, but for some reason its not working how I would expect. Assume my routes are set up correctly. Anyone have any idea why this might be?

Keval Bhatt · Accepted Answer · 2015-06-19 03:57:04Z

2

Use

<date-picker>

in your html it will work.

Because Angular converts camelCasing to snake-casing, so your datePicker directive needs to be renamed to date-picker in html.

Why to use CamelCasing:

Normalization:

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

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

See this example: http://jsfiddle.net/kevalbhatt18/khz8vxs4/1/

edited Jun 19, 2015 at 3:57

answered Jun 19, 2015 at 3:43

Keval Bhatt

6,3623 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

theamateurdataanalyst Over a year ago

WHAT? That's crazy. So it gets split by a dash when there is a capital letter?

vp_arth Over a year ago

Also add best practive below to the answer ;)

Collectives™ on Stack Overflow

Creating a simple directive with Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related