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. py随笔

    while true,无限循环 str.isdigit判断是不是数字 +只能在两个两个相同的类型之间执行 iter(i)将i加入迭代器

  2. C# 如何保证对象线程内唯一：数据槽（CallContext）

    如果说,一个对象保证全局唯一,大家肯定会想到一个经典的设计模式:单例模式,如果要使用的对象必须是线程内唯一的呢? 数据槽:CallContext,ok看下msdn对callcontent的解释. Ca ...

  3. Java Web基础——Action+Service +Dao三层的功能划分

    1. Action/Service/DAO简介: Action是管理业务(Service)调度和管理跳转的. Service是管理具体的功能的. Action只负责管理,而Service负责实施. D ...

  4. php 复习

    <?php 一.php基础语法1.输出语句:echo print print_r var_dump() 2.php是弱类型语言强制转换类型: (类型)变量 settype(变量,类型) 3.变量 ...

  5. 重温WCF之发送和接收SOAP头（三）

    SOAP头可以理解为一种附加信息,就是附加到消息正文的内容. 既然消息头是附加信息,那有啥用呢?你可别说,有时候还真有不少用处.举个例子,WCF的身份验证是不是很麻烦?还要颁发什么证书的(当然不是荣誉 ...

  6. Android请求服务器的两种方式--post, get的区别

    android中用get和post方式向服务器提交请求_疯狂之桥_新浪博客http://blog.sina.com.cn/s/blog_a46817ff01017yxt.html Android提交数 ...

  7. Python 打包程序判断是否已经运行

    代码如下: # -*- coding: UTF8 -*- from win32com.client import Dispatch import win32com import sys, os fro ...

  8. 【tornado】系列项目（一）之基于领域驱动模型架构设计的京东用户管理后台

    本博文将一步步揭秘京东等大型网站的领域驱动模型,致力于让读者完全掌握这种网络架构中的“高富帅”. 一.预备知识: 1.接口: python中并没有类似java等其它语言中的接口类型,但是python中 ...

  9. Web框架之Tornado

    概述 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了 ...

  10. hdu 1556:Color the ball（线段树，区间更新，经典题）

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...