AngularJS(二)_指令ng-*
来源:互联网 发布:电信百事通需要网络吗? 编辑:程序博客网 时间:2024/05/29 16:38
AngularJS 指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
数据绑定
上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。
{{ }} 是通过 ng-model="" 进行同步。
在下一个实例中,两个文本域是通过两个 ng-model 指令同步的:
重复 HTML 元素
ng-repeat 指令会重复一个 HTML 元素:
<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul></div>
ng-repeat 指令用在一个对象数组上:
<div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"> <p>循环对象:</p><ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li></ul> </div>
AngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。
把实例中的对象想象成数据库中的记录。
ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以:
- 为应用程序数据提供类型验证(number、email、required)。
- 为应用程序数据提供状态(invalid、dirty、touched、error)。
ng-repeat 指令
ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。
创建自定义的指令
使用 .directive 函数来添加自定义的指令。要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割,runoob-directive:
<body ng-app="myApp"><runoob-directive></runoob-directive><script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>" };});</script></body>
可以通过以下方式来调用指令:
- 元素名<runoob-directive></runoob-directive>
- 属性<divrunoob-directive></div>
- 类名<divclass="runoob-directive"></div>
- 注释 <!-- directive: runoob-directive -->
限制使用
restrict 值可以是以下几种:
E
作为元素名使用A
作为属性使用C
作为类名使用M
作为注释使用
restrict 默认值为 EA
, 即可以通过元素名和属性名来调用指令。
var app = angular.module("myApp", []);app.directive("runoobDirective", function() { return { restrict : "A", template : "<h1>自定义指令!</h1>" };});
0 0
- AngularJS(二)_指令ng-*
- AngularJS ng-cloak 指令
- AngularJS ng-model 指令
- AngularJS ng-model 指令
- AngularJS ng-checked指令
- AngularJS ng-model 指令
- AngularJS ng-list 指令
- AngularJS ng-open 指令
- AngularJs-指令<ng-**>
- AngularJS ng-show指令
- angularjs-ng-class指令
- AngularJS ng-style 指令
- 理解AngularJS指令 -- ng-view
- AngularJS 指令ng-if注意事项
- angularjs基础ng属性指令
- AngularJS之ng-app指令
- AngularJS之ng-model指令
- AngularJS之ng-controller指令
- Lucene查询语法详解(Lucene query syntax)- 用于Kibana搜索语句
- 设计模式-单例模式
- Tiny210(S5PV210) U-BOOT(一)----启动过程
- 嵌入式开发中http传输二进制数据的注意事项
- Mysql主从复制,读写分离(mysql-proxy),双主结构完整构建过程
- AngularJS(二)_指令ng-*
- Weex开发笔记
- [Android]Android Studio获取开发版和发布版的MD5和SHA1
- 设置EditText只能输入数字和字母
- 影响Linux YUM下载软件以及依赖包的因素
- java.lang.IllegalStateException: Multi dex requires Build Tools 21.0.0 / Current 20
- gulp 几个用法,打包,压缩,监听文件
- java:IO流学习小结
- VS2012编译报错,“······因为计算机丢失MSVCR120D.dll”之解决方案