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,即可以通过元素名和属性名来调用指令。