~~~
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">angular.js中,指令是最基础的也是最重要的工具之一。angular.js指令指的是以ng为前缀的HTML属性。在之前的ng-app、ng-model等,都属于指令。</span>
~~~
angular.js中的基本指令包括如下内容:
1.ng-app/ng-model
ng-app指令用于声明angular,js的作用范围,ng-model用于声明模型。这些在之前都已经进行过详细介绍。
2.ng-init
这个指令用于进行模块的初始化,一个最简单的使用方法是利用这个指令进行数据初始化,代码如下:
~~~
<div ng-app="" ng-init="cost=5">
<p>单价: {{ cost }}</p>
</div>
~~~
上述代码中,利用ng-init初始化了cost变量的值,在之后利用{{}}(angular中的数据绑定方式之一)进行调用。但是这种数据初始化的方式并不推荐。
3.ng-bind
这个指令可以用来进行数据绑定,它的功能就和我们之前提到的{{}}作用相同。在如下代码中,我们不用{{}}方式,而改用ng-bind指令进行数据绑定,代码如下:
~~~
<div ng-app="" ng-init="cost=5">
<p>单价: <span ng-bind= "cost"></span></p>
</div>
~~~
4.ng-repear
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>
~~~
这里对names内的所有徐对象进行遍历,并分别按照规定的模板进行输出,类似于php中的foreach语句。x in names表示将names数组中的每一个对象都赋值给x,然后输出,没循环一次进行一次这个操作,直到将数组遍历结束。
以上给出的都是AngularJS中自己预先定义的指令。我们在angular.js中还可以自己进行指令的定义,需要使用directive方法。一个简单的指令定义代码如下:
~~~
var app = angular.module("myApp", []);
app.directive("hello", function() {
return {
template : "<h1>自定义指令!</h1>"//tempate指定该指令渲染的模板
};
});
~~~
上面的代码中我们定义了一个hello指令,template定义了该指令的模板,即我们使用这个指令时,需要在html中呈现出什么样的内容。定义好指令后,就可以像之前一样进行调用了。
上面对指令的调用只给出了作为html属性的调用方式。其实angular.js中提供了四种进行指令调用的方法。它们分别为元素名调用、属性调用、类名调用和注释调用。它们的形式如下(按顺序):
~~~
<runoob-directive>runoob-directive>
~~~
~~~
<div runoob-directive>div>
~~~
~~~
<div class="runoob-directive">div>
~~~
angular中,为了更清楚的表示这四种调用,每个调用都为其设定了一个英文字母的标识,用于在指令定义时限定它们的被调用方式,分别为:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
下面的例子说明了如何在定义指令时使用这些限制:
~~~
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
~~~
当然,这些标识也可以放在一起使用,默认的restrict为EA,表示可以元素名调用或者属性调用。
- 前言
- Jquery Mobile入门笔记
- 豆瓣API使用介绍及通过ajax跨域获取url的json数据的方法
- jQuery插件实战:slider.js/jquery.validate/jRating介绍
- HTML5能为我们带来什么
- js字符串主要操作方法
- jquery实现全文检索与鼠标滑过工具栏特效
- HTML5移动开发常用——XML基本知识介绍
- HTML5移动开发实战必备知识——本地存储(1)
- HTML5本地数据库详解
- 前端素材解析—利用linear制作复杂的边框效果
- HTML5开发移动web应用—JQuery Mobile(3)-列表
- Angular.js回顾+学习笔记(1)【ng-app和ng-model】
- HTML5开发移动web应用—JQuery Mobile(4)-事件
- CSS定位中的必须深究的常用技法
- Angular.js中的指令——易懂全解析
- 实践中学习AngularJS中的表单
- 高效利用Angular中内置服务
- 利用Angular.js从PHP读取后台数据