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. vmstat uptime 系统状态脚本

    #!/bin/bash # # Command :vmstat,uptime #Capture_Stats - Gather System Performance Statistics ####### ...

  2. Enum:Fliptile(POJ 3279)

    Fliptile 题目大意:农夫想要测牛的智商,于是他把牛带到一个黑白格子的地,专门来踩格子看他们能不能把格子踩称全白 这一题其实就是一个枚举题,只是我们只用枚举第一行就可以了,因为这一题有点像开关一 ...

  3. 【mongo】Can't take a write lock while out of disk space错误

    今天遇到了这个错误,各种无法操作.找了很久的方案,都没用.最终发现,原来是我虚拟机硬盘满了......清除了些没用的东西,就恢复了.

  4. HDU 1087 Super Jumping! Jumping! Jumping! --- DP入门之最大递增子序列

    DP基础题 DP[i]表示以a[i]结尾所能得到的最大值 但是a[n-1]不一定是整个序列能得到的最大值 #include <bits/stdc++.h> using namespace ...

  5. js方法类库封装的简易示例

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></s ...

  6. Qt Creator 中关于调试器的设置

    Qt Creator3.4.2 Based on Qt 5.5.0 (MSVC 2013, 32 bit) 在安装了VS2013的电脑上能够自动识别VS编译器,却不能识别调试器 需要下载一个wdk,安 ...

  7. ios 上下拉刷新

    UITableView:下拉刷新和上拉加载更多 - cDigger 时间 2013-11-24 02:00:00  博客园精华区 原文  http://www.cnblogs.com/lexingyu ...

  8. python字符串中插入变量

  9. C#回顾 - 3.NET的IO：字节流

    使用 Stream 类管理字节流 使用 FileStream 类管理文件数据 使用 MemoryStream 类管理内存数据 使用 BufferedSream 类提高流性能   3.1 FileStr ...

  10. 【Java EE 学习 19】【使用过滤器实现全站压缩】【使用ThreadLocal模式解决跨DAO事务回滚问题】

    一.使用过滤器实现全站压缩 1.目标:对网站的所有JSP页面进行页面压缩,减少用户流量的使用.但是对图片和视频不进行压缩,因为图片和视频的压缩率很小,而且处理所需要的服务器资源很大. 2.实现原理: ...