Angular JS学习之指令

1.Angular JS通过称为指令的新属性来扩展HTML;通过内置的指令来为应用添加功能;

2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-;

**ng-app:指令初始化一个AngularJS应用程序

**ng-init:指令初始化应用程序数据

**ng-model:指令把元素(比如输入域的值)绑定到应用程序;

<div ng-app="" ng-init="firstName='John'">

  <p>在输入框尝试输入:</p>

  <p>姓名:<input type="text" ng-model="firstName"></p>

  <p>你输入的为:{{firstName}}</p>

</div>

3.ng-app指令告诉AngularJS,<div>元素是Angular应用程序的“所有者”,一个网页可以包含多个运行在不同元素的Angular应用程序;

4.数据绑定:{{firstname}}表达式是一个AngularsJS数据绑定表达式;

AngularJS中的数据绑定,同步了AngularJS表达式与AngularJS数据;

{{firstname}}是通过ng-model="firstname"进行同步;

例:

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

<h2>价格计算器</h2>

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

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

<p><b>总价:</b>{{quantity*price}}</p>

</div>

5.重复HTML元素:ng-repeat指令会重复一个HTML元素

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">

  <p>使用 ng-repeat来循环数组</p>

  <ul>

    <li ng-repeat="x in names">{{x}}</li>

  </ul>

</div>

6.ng-app指令:定义了AngularJS应用程序的根元素,在网页加载完毕时会自动引导(自动初始化)应用程序;

7.ng-init指令:为AngularJS应用程序定义了初始值;通常情况下,不使用ng-init,使用一个控制器或模块来代替它;

8.ng-model指令:绑定HTML元素到应用程序数据;

**为应用程序提供类型验证(number,email,required)

**为应用程序数据提供状态(invalid,dirty,touched,error)

**为HTML元素提供CSS类

**绑定HTML元素到HTML表单

9.ng-repeat指令:ng-repeat指令对于集合中(数组中)每一个项会克隆一次HTML元素

10.创建自定义的指令:除了AngularJS内置的指令外,还可以创建自定义的指令;

**可以使用.directive函数添加自定义的指令;

**要调用自定义指令,HTML元素上需添加自定义指令名;

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>

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

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

  return{

    template:"<h1>自定义指令!</h1>"

  };

});

</script>

</body>

11.可以使用以下方式调用指令:

(1)元素名:<runoob-directive></runoob-directive>

(2)属性:<div runoob-directive></div>

(3)类名:<div class="runoob-directive"></div>

(4)注释:<!--指令:runoob-directive-->

12.限制使用:限制你的指令只能通过特定的方式调用;

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

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

  return{

    restrict :"A",

    template :"<h1>自定义指令!</h1>"

  };

});

**restrict值可以是以下几种:默认为EA,即通过元素名和属性名来调用指令

E作为元素名使用

A作为属性使用

C作为类名使用

M作为注释使用

原文地址:https://www.cnblogs.com/hqutcy/p/6045806.html