AngularJS：奇怪的自定义指令

Question

I newbie to AngularJS .I have created my first custom directive with name of name my-customer by copying from side and paste it in my working file. When i try to built it myself i saw weird behavior because if I tried to access directive in with my-customer it displays nothing on screen.

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

when I saw the original example ,author access the same directive with myCustomer name. How angular convert an html attribute to directive name . because if I tried to use mycustomer it still find nothing. What about controller which have more then one - in their name like 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}}'
    }
});

Answer 1

Angular internally converts this my-customer like code to camelCase.
In this case of multiple - will get converted to camelCase.
Ex: my-name-is-intekhab will be converted to myNameIsIntekhab

Also you can use : or data-

This is from Angular site

The normalization process is as follows:

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