用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?

Answer 1

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 (eg 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 (eg 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/