angular指令

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表单。

ng-disabled指令:该指令直接绑定到应用程序数据到html的disabled属性。

ng-show指令:根据value的值来显示或者隐藏html元素。

ng-hide指令:用于隐藏或者显示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

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