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

我這段代碼的期望是看 「我想這在我的檢討視圖顯示」 在與此控制器相對應的視圖。該視圖注入我的index.html中的<div ng-view></div>。我在這裏有一個非常簡單的例子，但由於某種原因，它不能如我所期望的那樣工作。假設我的路線設置正確。任何人都有任何想法，爲什麼這可能是？

Answer 1

使用

<date-picker> 

在HTML它會工作。

因爲角度轉換camelCasing蛇殼，所以你的datePicker指令需要重新命名爲HTML中的日期選擇器。

---

爲什麼使用駝峯規則：

---

Normalization:

角正常化元素的標籤和屬性的名稱，以確定哪些元素匹配該指令。我們通常通過區分大小寫的camelCase標準化名稱（例如ngModel）來引用指令。但是，由於HTML不區分大小寫，所以我們通過小寫形式引用DOM中的指令，通常在DOM元素上使用dash-delimited屬性（例如ng-model）。

歸一化處理是如下：

地帶x和從元件/屬性的前DATA-。 將：， - 或_分隔名稱轉換爲camelCase。

---

見這個例子：http://jsfiddle.net/kevalbhatt18/khz8vxs4/1/