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作为注释使用

Angular JS学习之指令的更多相关文章

  1. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  2. 适合我胃口的angular.js学习资料

    断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...

  3. Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  4. Angular.js之自定义指令学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. angular.js学习的第一天

    第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...

  6. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  7. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  8. Angular JS学习之表达式

    1.Angular JS使用表达式把数据绑定到HTML: 2.Angular JS表达式写在双大括号中:{{expression}} **Angular JS表达式把数据绑定到HTML,这与ng-bi ...

  9. Angular JS 学习之简介

    1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...

随机推荐

  1. codeforces 515B. Drazil and His Happy Friends 解题报告

    题目链接:http://codeforces.com/problemset/problem/515/B 题目意思:有 n 个 boy 和 m 个 girl,有 b 个 boy 和 g 个 girl ( ...

  2. C#关于new的用法

    1.运算符就是在实例化一个类的时候(运算符的用法) A a=new A(); 2.new 约束指定泛型类声明中的任何类型参数都必须有公共无参数构造函数.当泛型类创建类型的新实例时,将此约束应用于类型参 ...

  3. code vs1706 求合数和(数论 素数的判定)

    1706 求合数和  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题解  查看运行结果     题目描述 Description 用户输入一个数,然后输出 ...

  4. Vim 强大的配置

    新建文件.vimrc,然后复制如下内容,并将该文件放到vim安装目录下 map <F9> :call SaveInputData()<CR> func! SaveInputDa ...

  5. 杨辉三角用java实现

    代码如下: public class ErArray { public static void main(String[] args) { //杨辉三角 int[][] num = new int[1 ...

  6. iOS 十六进制和字符串转换

    NSString *dictString = [dict JSONFragment];//组合成的. dictString==={"content":"Sadgfdfg& ...

  7. JDK、Jmeter、Android环境变量配置

    JDK环境变量 1.在系统变量里点击新建,变量名填写JAVA_HOME,变量值填写JDK的安装路径,在这里就填写"D:\Program Files\Java\jdk1.6.0_26" ...

  8. 使用Delphi对象（声明、实例化、构造、释放）

    一.声明和实例化 在使用一个对象之前,用class关键字声明一个对象.可以在一个程序或单元的type部分声明一个对象类型: type TFooObject = class; 除了声明一个对象类型,通常 ...

  9. 算法系列：XXX

    转载自http://www.cnblogs.com/skynet/p/3372855.html 这次分享的宗旨是——让大家学会创建与使用静态库.动态库,知道静态库与动态库的区别,知道使用的时候如何选择 ...

  10. JavaScript 简介

    JavaScript是一种专为网页交互而设计的脚本语言,由下列三个不同的部分组成: ECMAScript,由ECMA-262 定义,提供核心语言功能: DOM, 提供访问和操作网页内容的方法和接口; ...