Angular JS1学习笔记之一指令
来源:互联网 发布:ubuntu kylin qq下载 编辑:程序博客网 时间:2024/04/29 12:44
AngularJS 指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
各指令简介
1. ng-app 指令
ng-app 指令初始化一个 AngularJS 应用程序,定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
2. ng-init 指令
ng-init 指令初始化应用程序数据,为 AngularJS 应用程序定义了 初始值。
通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。
3.ng-model 指令
ng-model 指令把元素值(比如输入域的值)绑定到应用程序; 绑定 HTML 元素 到应用程序数据。
ng-model指令也可以:
为应用程序数据提供类型验证(number、email、required)。
为应用程序数据提供状态(invalid、dirty、touched、error)。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
4. ng-repeat 指令
ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。
5. 创建自定义指令
实例:
<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入:</p> <p>姓名:<input type="text" ng-model="firstName"></input></p> <p>你输入的为:{{firstName}}</p></div>
页面上开始输入框内有初始值为John,你也可以自己输入值,通过ng-model指令绑定到页面视图上。
ng-app指令告诉AngularJs,<div>
元素是Angular应用程序的所有者。
一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。
1. 数据绑定
上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model=”firstName” 进行同步。
一个应用程序也可包含多个ng-model指令,如计算器的小应用:
<div ng-app="" ng-init="quality=5;price=2"> <h2>价格计算器:</h2> <p>单价:<input type="number" ng-model="price"></input></p> <p>数量:<input type="number" ng-model="quality"></input></p> <p>总价为:{{quality*price}}</p></div>
2.重复HTML元素
2.1 ng-repeat 指令会重复一个 HTML 元素,如:
<div data-ng-app="" data-ng-init="names=['Sofia','Vantis','jonas','shasha']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li data-ng-repeat="x in names"> {{x}} </li> </ul></div>
程序将会遍历names数组,依次输出其内容:
2.2 ng-repeat 指令用在一个对象数组上,如:
<div data-ng-app="" data-ng-init="names=[ {name:'vantis',tel:'111'}, {name:'Sofia',tel:'10124'}, {name:'jonas',tel:'447875'} ]"> <p>使用 ng-repeat 来循环对象数组</p> <ul> <li data-ng-repeat="x in names"> {{'姓名:'+x.name+' '+'Tel:'+x.tel}} </li> </ul></div>
依次输出对象数组中的内容
创建自定义的指令
除了 AngularJS 内置的指令外,我们还可以使用 .directive 函数来创建自定义指令。
- 要调用自定义指令,HTMl 元素上需要添加自定义指令名,如下的
<runoob-directive></runoob-directive>
。
使用驼峰法来命名一个指令如: runoobDirective ,但在使用它时需要以 - 分割, runoob-directive:
对以下示例:
<div ng-app="myApp"> <runoob-directive></runoob-directive>//调用 <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script></div>
程序将会输出tempalte里规定的样式内容。
这里我们定义了自己的指令runoobDirective,在声明时,我们使用驼峰命名。注意:在调用时,我们用元素名的方式调用该指令,此时指令名以-分隔。
调用方式
调用指令除上述的元素名方式外,还可使用属性、类名和注释方式。
【元素名方式】
<runoob-directive></runoob-directive>
【属性方式】
直接在上述的代码处,将<runoob-directive></runoob-directive>
替换成<div runoob-directive></div>
即可。
<div runoob-directive></div>
【类名方式】
同样地,在上述代码处,相同位置替换即可。
<div class="runoob-directive"></div>
【注释方式】
注释方式请注意:return语句里加了两个必需属性
<div ng-app="myApp2"> <!-- directive: runoob-directive --> <script> var app = angular.module("myApp2", []); app.directive("runoobDirective", function() { return { restrict: "M", replace: true, template: "<h1>自定义指令!</h1>" }; }); </script> <p><strong>注意:</strong> 我们需要在该实例添加 <strong>replace</strong> 属性, 否则评论是不可见的。</p> <p><strong>注意:</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p></div>
效果如图:
- 限制使用
通过添加设置restrict属性,可以限制你的指令只能通过特定方式来调用。
restrict属性值可以是以下几种:
- E 只限元素名使用
- A 只限属性使用
- C 只限类名使用
- M 只限注释使用
restrict默认值为EA,即可以通过元素名和属性名来调用指令。
- Angular JS1学习笔记之一指令
- Angular JS1学习笔记之一简介与表达式
- Angular JS1学习笔记之一ng-model模型
- Angular.js之指令学习笔记
- angular学习笔记(三十)-指令(4)-transclude
- Angular指令学习
- angular入门学习之一
- Angular指令学习-简单介绍
- js1
- js1
- js1
- js1
- js1
- js1
- js1
- js1
- js1
- js1
- MAC && PIN
- Android Mediacodec硬解H264并显示
- SGU 106 The equation(扩展欧几里得)
- matlab中clear,clc,clf,hold作用
- [从头学数学] 第176节 概率
- Angular JS1学习笔记之一指令
- TrimTest.exe SrcFilePath targetFilePath
- Java reflect--动态执行Method-代码
- 数据库查询下一条
- Android Pingpong漏洞解析
- RTP协议分析
- matlabR2015b安装libsvm
- 每天laravel-20160713|ScheduleRunCommand
- java多线程之Condition实现更高效线程通信