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. Ditto - Windows剪贴板增强小工具，方便复制粘贴多条记录

    在平时的工作中,好多地方需要重复的复制粘帖一些重复性的代码,频繁的Ctrl+C.Ctrl+V导致效率很低,而且时间长了会很烦,Windows自带的剪切板功能一次只能进行一条记录操作,单一的不行,与提高 ...

  2. JSON数据格式

    JSON 数据格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人 ...

  3. ListView之BaseAdapter的使用

    话说开发用了各种Adapter之后感觉用的最舒服的还是BaseAdapter,尽管使用起来比其他适配器有些麻烦,但是使用它却能实现很多自己喜欢的列表布局,比如ListView.GridView.Gal ...

  4. iOS -类目，延展，协议

    1.类目 类目就是为已存在的类添加新的方法.但是不能添加实例变量.比如系统的类,我们看不到他的.m文件,所以没有办法用直接添加方法的方式去实现. @interface NSMutableArray ( ...

  5. 解决Windows10下80端口被PID为4的System占用的问题

    一.背景 最近由于好奇心,更新了windows10系统,感觉上手还蛮快,而且体验还不错,但是在IDEA中做开发时,使用80端口进行启动项目的时候发现端口被占用了,于是尝试解决这个问题.具体步骤如下,分 ...

  6. 240个jquery插件（转）

    http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/File upload Ajax File U ...

  7. Ubuntu自定义服务

    1.准备脚本 准备好一个bash服务脚本,包括start|stop|restart等参数,将脚本文件命名为“服务名”,拷贝到/etc/init.d/目录下. 2.添加服务sudo update-rc. ...

  8. markdown思维导图笔记

  9. 比较各大挪动门户网站淘宝、京东、网易、新浪、腾讯meta标签的异同

    首先先展示一下各个网站的有关meta标签的代码: 网易 <meta charset="UTF-8"> <meta content="width=devi ...

  10. 【mysql中myisam和innodb的区别】

    单击进入源网页 要点摘要: 1.查看mysql存储引擎的状态mysql> show engines; 2.查看mysql默认的存储引擎mysql> show variables like ...