CODEWITHSUNDEEP
javascriptangularjs
theamateurdataanalyst
theamateurdataanalyst

Reputation: 2834

Creating a simple directive with Angular

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?

Upvotes: 1

Views: 33

Answers (1)

Keval Bhatt
Keval Bhatt

Reputation: 6322

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/

Upvotes: 2

Related Questions