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>

我对这段代码的期望是看到＆＃34;我想让它出现在我的评论视图中＃34;在与该控制器对应的视图中。该视图将注入我的index.html中的<div ng-view></div>。我在这里有一个非常简单的例子，但由于某些原因它不能按我的预期工作。假设我的路线设置正确。任何人都知道为什么会这样？

Answer 1

使用的的

的
<date-picker>

的在你的HTML中它会起作用。

因为Angular将camelCasing转换为snake-casing，所以你的datePicker指令需要在html中重命名为date-picker。

为何使用CamelCasing：

<强> Normalization:

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

规范化过程如下：

从元素/属性的前面剥离x-和data-。将：， - 或_分隔的名称转换为camelCase。

请参阅此示例：http://jsfiddle.net/kevalbhatt18/khz8vxs4/1/

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

1 个答案: