javascript - 使用 Angular 创建一个简单的指令

Question

我遇到了一个非常简单的问题，但我不明白为什么它不起作用。

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>

我对这段代码的期望是在与此 Controller 对应的 View 中看到“我希望它显示在我的评论 View 中”。 View 被注入(inject) <div ng-view></div>在我的 index.html 中。我这里有一个非常简单的例子，但出于某种原因，它并没有像我期望的那样工作。假设我的路线设置正确。有人知道为什么会这样吗？

Answer 1

使用

 <date-picker> 

在您的 html 中它会起作用。

因为 Angular 将驼峰式转换为蛇形，所以您的 datePicker 指令需要在 html 中重命名为 date-picker。

---

为什么要使用 CamelCasing:

---

Normalization:

Angular 规范化元素的标签和属性名称以确定哪些元素匹配哪些指令。我们通常通过区分大小写来引用指令 camelCase标准化名称(例如 ngModel)。但是，由于 HTML 不区分大小写，因此我们通过小写形式引用 DOM 中的指令，通常使用 dash-delimited DOM 元素的属性(例如 ng-model)。

归一化过程如下:

从元素/属性的前面去掉 x- 和 data-。将 :、- 或 _ 分隔的名称转换为驼峰命名法。

---

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