Details of the naming rules of the directive in ES0en. JS

Naming conventions

The same AngularJS directive has different naming conventions in js and html files: the standard little camel case naming convention is used in js files and the "lowercase letter + connector" naming convention is used in html files. See the table below

在js文件中	在html文件中
ngApp	ng-app
myDirective	my-directive

Processing mechanism

AngularJS chose this naming because the html file is case-insensitive while the js file is case-sensitive (myDir and mydir are different instructions in the js file, but html appears to be the same instruction), so the above naming specification is used to avoid possible errors.

During the execution of AngularJS, the naming of "lowercase letter + connector" is processed as follows, and finally replaced with the small hump naming method:

Remove the beginning x- and data-; The first word remains the same. Convert the first letter of the word after the connector to uppercase and remove the connector.

Here are two things to note:

Do not name the directive x or data as the first word Supported linkers include :,- and _, but are usually selected as linkers

Name an attribute in a scoped object

The attribute naming rules in the directive isolation scope object are the same as above, see the following code:

.directive('myDirective', function() {
 return {
 restrict: 'A',
 scope: {
  myUrl: '@', //  The attributes in the isolated scope object are named the small hump naming 
  myLinkText: '@'
 },
 template: '<a href="{{myUrl}}">{{myLinkText}}</a>'
})

<div my-directive
  my-url="http://google.com" <!-- html Use "lowercase" in the file + The name of the "separator" -->
  my-link-text="Click me">
</div>

conclusion