Angular.JS中指令的命名规则详解
时间:2019-03-30
本文章向大家介绍Angular.JS中指令的命名规则详解,主要包括Angular.JS中指令的命名规则详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
命名规范
同一个AngularJS指令,在js文件和html文件中有着不同的命名规范:在js文件中使用标准的小驼峰命名法,在html文件中使用“小写字母+连接符”的命名法。如下表所示
在js文件中 | 在html文件中 |
---|---|
ngApp | ng-app |
myDirective | my-directive |
处理机制
AngularJS之所以选择这样的命名方式,是因为html文件不区分大小写,而js文件则对大小写敏感(myDir和mydir在js文件中是不同的指令,但html看来是同一个指令),为了避免可能出现的错误,所以使用上述命名规范。
AngularJS执行过程中,对“小写字母+连接符”形式的命名做如下处理,最终装换成小驼峰命名法:
- 去掉开始部分的x-和data-;
- 第一个单词不变,把连接符后面的单词首字母转换成大写,去掉连接符。
这里有两点需要注意:
- 指令命名时不要以x或data作为第一个单词
- 支持的链接符包括:,-和_,但通常会选择-作为连接符
隔离作用域对象中的属性命名
指令隔离作用域对象中属性命名规则同上,见下面代码:
.directive('myDirective', function() { return { restrict: 'A', scope: { myUrl: '@', // 隔离作用域对象中属性命名为小驼峰命名法 myLinkText: '@' }, template: '<a href="{{myUrl}}">{{myLinkText}}</a>' })
<div my-directive my-url="http://google.com" <!-- html文件中使用“小写字母+分割符”的命名方式--> my-link-text="Click me"> </div>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- win10必备效率预览神器-Quick look
- 史上最全-Nginx和Tengine安装部署
- Jenkins+Ansible 实现自动化运维 DevOps
- FFmpeg 内容介绍 音视频解码和播放
- 开源:安卓手机app控制arduino,通过esp8266-01
- 聊聊dubbo-go的metricsFilter
- 程序设计理念-CentOs7实践Nginx-带来安装服务的通用法则
- 用CSS实现各种特殊效果
- 二分查找算法
- 一分钟学Python| Python的运算符 (上)
- JS开发必须知道的41个技巧【持续更新】
- PermissionX重磅更新,支持自定义权限提醒对话框
- 给Swagger换了个新皮肤,瞬间高大上了!
- 学习 | egg.js 中间件和插件
- Django template层之json报文遍历总结