javascript - Angular : Weird custom directive

标签 javascript angularjs angularjs-directive directive

我是 AngularJS 的新手。我创建了我的第一个自定义指令,名称为 my-customer,方法是从旁边复制并将其粘贴到我的工作文件中。当我尝试自己构建它时,我看到了奇怪的行为,因为如果我尝试使用 my-customer 访问指令,它不会在屏幕上显示任何内容。

test.directive('my-customer',function(){
code...
}   

当我看到原始示例时,作者使用 myCustomer 名称访问相同的指令。 Angular 如何将 html 属性转换为指令名称。 因为如果我尝试使用 mycustomer 它仍然一无所获。名称中有多个 - 的 Controller 怎么样 my-customer-a

<div ng-app="myapp">

            <div ng-controller="Controller">
                <div id="test" my-customer></div>
            </div>


        </div>


var test = angular.module('myapp', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}]);
test.directive('myCustomer',function(){

    return{

        template:'Name :{{customer.name}} Address: {{customer.address}}'
    }
});

最佳答案

Angular 在内部将这个 my-customer 之类的代码转换为 camelCase。
在这种情况下,多个 - 将转换为 camelCase。
例如:my-name-is-intekhab 将转换为 myNameIsIntekhab

您也可以使用:data-

这是来自 Angular 网站

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.

关于javascript - Angular : Weird custom directive,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32431100/

相关文章:

javascript - 使用 localStorage 显示最近访问的 n 个页面

javascript - 具有动态异步内容的 AngularJS 元数据

javascript - 用JS显示计数器变量

javascript - angularjs对话框表单数据不更新范围

AngularJS 服务中的 DOM 操作

javascript - 改进类切换

javascript - Angularjs 让 Controller 工作

javascript - 如何过滤表中的二级ng-repeat

javascript - 更改文本区域模型后指令不会触发

javascript - Angularjs 自定义指令 ngShow 不触发