Angular.js中的指令——易懂全解析

标签：

<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>

3.ng-bind

这个指令可以用来进行数据绑定，它的功能就和我们之前提到的{{}}作用相同。在如下代码中，我们不用{{}}方式，而改用ng-bind指令进行数据绑定，代码如下：

<div ng-app="" ng-init="cost=5">
<p>单价： <span ng-bind= "cost"></span></p>
</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中自己预先定义的指令。我们在angular.js中还可以自己进行指令的定义，需要使用directive方法。一个简单的指令定义代码如下：

var app = angular.module("myApp", []);
app.directive("hello", function() {
    return {
        template : "<h1>自定义指令!</h1>"//tempate指定该指令渲染的模板
    };
});

上面对指令的调用只给出了作为html属性的调用方式。其实angular.js中提供了四种进行指令调用的方法。它们分别为元素名调用、属性调用、类名调用和注释调用。它们的形式如下（按顺序）：

<runoob-directive></runoob-directive>

<div runoob-directive></div>

<div class="runoob-directive"></div>

<!-- 指令: runoob-directive -->

E 只限元素名使用

A 只限属性使用

C 只限类名使用

M 只限注释使用

下面的例子说明了如何在定义指令时使用这些限制：

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

Angular.js中的指令——易懂全解析

标签：

原文地址：http://blog.csdn.net/fareise/article/details/50922146