angular指令

标签：方法   html   ice   控制器   限制   this   注释   mod   function   

AngularJS通过使用指令来扩展HTML、为应用程序添加新的功能；允许用户自定义新的指令。

AngularJS是扩展了HTML属性，使用格式如下ng-**。

AngularJS的指令有ng-app、ng-init、ng-model等，在接下来会一一解释。

数据绑定：ng-model和{{}}

“”{{}}“”是AngularJS数据绑定的表达式，数据绑定同步了AngularJS表达式和AngularJS数据；如下例子：

<div ng-app="" ng-init="quantity=2;price=5">

<h2>the sum is:</h2>

number:<input type="number" ng-model="quantity"></input>

price:<input type="number" ng-model="price"></input>

<p>sum:</b>{{quantity*price}}</p>

</div>

重复HTML元素：ng-repeat

ng-repeat指令会重复一个html元素。使用方法如下：

<div ng=app="" ng-init="countries=[‘china’,‘USA‘,‘JAP‘]">

<ul>

<li ng-repeat="c in countries">

{{c}}

</li>

</ul>

</div>

ng-repeat与foreach循环的用法类似。

应用程序根指令：ng-app

ng-app指令定义了应用程序的根元素，该指令会在网页加载完毕后自动引导（自动初始化）应用程序。

应用程序初始值指令：ng-init

ng-init为应用程序定义了初始值，但是在一般情况下，我们不推荐使用ng-init，而是使用控制器或者模板来替换。

数据绑定指令：ng-model

绑定HTML元素到应用程序数据。ng-model可以提供类型验证、为应用程序数据提供状态、为html元素提供css类、绑定html元素到HTML表单。

自定义指令

我们可以使用.direct函数来添加自定义的指令。

注意：在定义的时候是用骆驼发来命名一个指令，茹ngRun，但是在使用的时候需要用“-”分割开来：ng-Run。如下例子：

<div ng-app="app">

<ng-Run></ng-Run>//元素名称调用

<div ng-Run></div>//属性调用方式

<div class="ng-Run"></div>//类名调用方式

<script>

var app=angular.model("app",[]);

app.directive("ngRun",function(){

return{

template:"<p>this is a sample<p>"

};

});

</script>

</div>

通过使用restrict来限制指令的调用方式，可以使用如下的几个限制：

E：作为元素名使用。

A：作为属性使用。

C：作为类名使用。

M：作为注释使用。

restrict默认值是EA

angular指令

标签：方法   html   ice   控制器   限制   this   注释   mod   function   

原文地址：http://www.cnblogs.com/VARForrest/p/7761861.html