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 515C. Drazil and Factorial 解题报告

    题目链接:http://codeforces.com/problemset/problem/515/C 题目意思:给出含有 n 个只有阿拉伯数字的字符串a(可能会有前导0),设定函数F(a) = 每个 ...

  2. 【matlab】libsvm-3.18安装与使用

    安装 1. 在http://www.csie.ntu.edu.tw/~cjlin/ 中下载libsvm 2. 按照http://zjhello123.blog.163.com/blog/static/ ...

  3. 【python】time,datetime,string相互转换

    来源:http://essen.iteye.com/blog/1452098 #把datetime转成字符串 def datetime_toString(dt): return dt.strftime ...

  4. C# 串口操作系列(2) -- 入门篇，为什么我的串口程序在关闭串口时候会死锁 ？

    第一篇文章我相信很多人不看都能做的出来,但是,用过微软SerialPort类的人,都遇到过这个尴尬,关闭串口的时候会让软件死锁.天哪,我可不是武断,算了.不要太绝对了.99.9%的人吧,都遇到过这个问 ...

  5. mac VPN配置

    来自: http://www.eefocus.com/Kevin/blog/11-09/230878_53c71.html RSA的SecurID长的是这个样子滴: Mac里面,可以设置VPN, 方法 ...

  6. python基础——使用__slots__

    python基础——使用__slots__ 正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: cla ...

  7. NYOJ926（概率）

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=926 设最终A获胜的概率为P,则B获胜的概率为1-P: 因此我们只需要考虑A获胜的概率即可 ...

  8. AFNetworking请求设置请求头

    NSString *url = @"INPUT URL HERE"; AFHTTPRequestOperationManager *manager = [AFHTTPRequest ...

  9. 列出zip文件内全部内容 当前目录下的所有文件压缩成zip格式的文件(file.zip)

    [root@ok Desktop]# zip -r image.zip ./*.jpg adding: 20161007_113743.jpg (deflated 0%) adding: 201610 ...

  10. MySQL 主从同步

    http://blog.csdn.net/z69183787/article/details/53897894