资讯专栏INFORMATION COLUMN

AngularJs功能(六)--指令

Mertens / 3599人阅读

摘要:事件只针对输入框值的真实修改,而不是通过来修改。指令将给定表达式的值替换元素的内容。指令还有另外一种转换方式,如果你有字符串数组希望在输入框中显示,你可以在上使用指令。

指令 Directive

指令系统(Directive)是Angular应用的一个重要特性。

是通过对DOM元素的标签丶属性来增强HTML表现力,为其增加一些特定功能。
本篇参考文档Angular菜鸟教程

内置指令

这里介绍的是常用的一些angularJs内置指令:

1、ng-model
这个是将表单控件和当前作用域的属性进行绑定。需要注意绑定的scope的范围(父scope与子scope)。
ng-model主要绑定的元素包括input, select, textarea 。
ng-model的元素都有:
ng-valid(可用),
ng-invalid (不可用)
ng-pristine(用户为对这个元素进行操作过),
ng-dirty(元素的模型发生改变的话)属性; 这几个属性都是布尔值。
2、ng-init
该指令被调用时会初始化内部作用域。一般不建议使用此参数。
3、ng-app
用于告诉 AngularJS 应用当前这个元素是根元素。
所有 AngularJS 应用都必须要要一个根元素。
HTML 文档中只允许有一个 ng-app 指令,如果有多个 ng-app 指令,则只有第一个会被使用。
下边是关于ng-app需要注意的点:
1>这个是必需的。使用该指令自动启动一个AngularJS应用。
2>ngapp指令指定的应用程序的根元素,通常放置在网页的根元素如body或html 标签。
3>只有一个AngularJS应用可以自动引导每个HTML文档。
4.第一ngapp找到该文件将定义自动引导的根元素的应用。
5>运行多个应用程序在一个HTML文件,您必须手动引导他们使用angular.bootstrap。
6>AngularJS应用不能互相嵌套。
7>你可以指定一个AngularJS模块被用于应用程序的根模块。
8>该模块将被加载到应用程序时,引导到$injector对象中。
9>它应该包含所需的应用程序代码,或依赖于将包含代码的其他模块的依赖关系。
4、ng-controller
用于为你的应用添加控制器。
//expression     控制器名。

在控制器中,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。

5、ng-form
Angular表单其实是Angular提供的Directive,它有一个别名叫ng-form。是这个Directive实例化了一个FormController来负责表单内的页面逻辑(主要是表单验证)。
6、ng-disabled
设置表单输入字段的 disabled 属性(input, select, 或 textarea)。
如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。
我们可以在AngularJS中通过表达式返回值true/false令其生效。
//expression 如果表达式返回true,则设置为元素添加 disabled 属性。

7、ng-readonly
设置表单输入字段设为只读。
可以通过表达式返回值true/false将表单输入字段设为只读。
8、ng-checked
设置是否选中复选框。
其中 ng-true-value="""" ng-false-value="""",可用来设置选中时或不选中时对应的值
9、ng-selected
用于设置