angularjs学习笔记三——directive
AngularJS 通过被称为 指令 的新属性来扩展 HTML。
正如你所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
以下列举了一些指令，并不一定常用，但是都有用！
有些指令相关的demo，有兴趣的可以下载，github地址：https://github.com/392468072/demo
自带指令
1、ng-app此指令声明angular的边界，也就是应用程序入口（当然没有ng—app指令的时候也不要奇怪，还有其他方法可以做入口，angular.bootstrap（element，[modules]，config））
2、ng-bind 就是绑定模板，其实和{{hash}}的效果是一样的，不过要注意的是{{hash}}在各种原因下可能会被用户看到，带来不好的用户体验
3、ng-model 它链接了页面可交互元素（input，textarea之类的）和位于$scope之上的model，这儿有点乱，自己理清楚即可
4、ng-controller设置子作用域对象$scope（父作用域为$rootScope）的初始状态，给子作用域$scope增加行为，控制业务逻辑
5、ng-init 初始化数组，可以方便测试，现在已经不推荐使用了
6、ng-repeat迭代输出 orderBy：“keyword”可以指定输出顺序
7、ng-click 允许自定义行为某个元素被点击，当然其它事件指令都有类似的作用如：
ng-dbclick双击 ng-mouseDown按下鼠标左键 ng-mouseUp松开鼠标左键 ng-mouseOver鼠标移出 ng-mouseEnter鼠标移入
ng-copy 文本被复制 ng-paste文本被粘贴 ng-select文本被选择 ng-change ng-blur ng-keydown等等，当然还有很多，就不11列出了
8、ng-submit 这肯定和form表单相关咯，对，就是submit form的意思
9、ng-href/ng-src 链接，这里可能会有人问，为什么不直接用html标签的属性呢？href/src = “{{hash}}”
因为官方说：The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}.
如果浏览器将{{hash}}里的值,也即src/href属性值替换成文本以后可能就停止干活了.
10、ng-if 接收boolean值，若为false，它控制的DOM节点会被删除，若为true就会创建被插入DOM节点
11、ng-include 可以在模板中嵌入其他模板，实现前端页面的复用
12、ng-non-bindable指令指该元素的内部{{****}}不被绑定和转义，不受angular的掌控
13、ng-pluralize 应该是使成为复数
14、ng-show/ng-hide 显示、隐藏元素
15、ng-style设置style 接收一个css对象 ng-style={{cssObj}}
16、ng-switch这个指令相当于通过$scope内部变量控制dom的隐藏和显示，其实这个指令非常强大， 相当于是为html代码提供了ifelse的功能 （因为angular的html中不能通过ifelse控制逻辑）
17、ng-transclude自定义标签
自定义指令
最后说明：指令是可以自定义的
具体的有4种表现方式：
- E 页面标签，也就是新的html元素<hello-angular></hello-angular>
- A 元素的属性<input type="text" hello-angular="" />
- C css类选择器的值<input type="text" class="hello-angular"/>
- M 注释<!-- director:hello-angular -->
先来创建一个自定义指令（13—23行代码）
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>自定义指令demo</title>
</head>
<body>
<div ng-controller="testCon">
<hello-angular>beauty</hello-angular>
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script>
angular.module('app',[])
.directive('helloAngular',function(){
return{
restrict:'AECM',
template:'<p>hello,<b ng-transclude></b></p>',
transclude:true
};
})
.controller('testCon',function($scope){ });
</script>
</body>
</html>
输出： hello，beauty
没错就是上面那个输出，不信可以试试咯！
restrict： 翻译为”限制“，也许细心的人会发现这个属性，一一对应指令的四种变现方式，这就对了，这就是被允许的表现方式
templace： 这其中是标签也可以是字符串，不是标签的话会报错，它的兄弟属性是templateUrl，两者只需其一
templateUrl： url？是的，必须是url才行咯，想想看，如果没有这个属性，template将会承载所有的标签，如果你要添加很长的一段代码，那么template的属性值会很长很长，
肯定会不方便咯
transclude： 前面那个<b>标签的属性ng-transclude肯定和这个有关系对吧，设置为true，一个乾坤大挪移就把<hello-angular>移动到template中的<b>标签里面咯
接着，小小的改下代码，17 18行改成下面这样，看俺replace的作用
restrict:'AECM',
replace:true,
template:'<p>hello</p>'
replace： 从单词的意思就可以看出来，替代，没错，就是用<p>hello</p>替代页面上的<hello-angular><hello-angular>
不要问卤煮为什么，自己敲一敲就ok。
再来一段代码，说明下面scope的用法
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>自定义指令demo</title>
</head>
<body>
<div ng-controller="testCon">
<hello-angular info="person"></hello-angular>
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script>
angular.module('app',[])
.directive('helloAngular',function(){
return{
restrict:'AECM',
scope:{
personReference:'=info'
},
template:'He is {{person.name}}'
};
})
.controller('testCon',function($scope){
$scope.person = {name:'Tom',age:180};
});
</script>
</body>
</html>
scope：自定义作用域，没有这个属性时默认使用父级controller的$scope，有socpe{}时，此scope继承父级controller的$scope
绑定策略的三种形式”=“，“@”，“&” 将本地作用域和DOM中的属性值绑定起来
”=“对一个对象的引用，后面的info是自定义标签中的属性（第9行代码），简而言之，personReference对象是person对象的引用
”@“表示对一个字符串的拷贝<ps:这儿不太确定，不过根据js来看，应该是这样>，这里不再赘述
”&“表示对父级作用域进行绑定，并将其中的属性包装成一个函数
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>自定义指令demo</title>
</head>
<body>
<div ng-controller="testCon">
<hello-angular get-classes="classes" get-name="name"></hello-angular>
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script>
angular.module('app',[])
.directive('helloAngular',function(){
return{
restrict:'AECM',
scope:{
getClasses:'&',
getName:'&'
},
template:'there are {{classes}} classes<br /><div ng-repeat="i in name">NO.{{$index+1}} className is {{i}}</div>',
controller:function($scope){
$scope.classes = $scope.getClasses();
$scope.name = $scope.getName();
}
};
})
.controller('testCon',function($scope){
$scope.classes = 3;
$scope.name = ['A','B','C'];
});
</script>
</body>
</html>
输出截图
“=”，“@”，“&”简写方式（代码第18,19行）scope{}中属性值可以简写为“@”，不过也必须遵循和DOM节点的属性一一对应的原则，angular会进行自动匹配
angularjs学习笔记三——directive的更多相关文章
- AngularJS学习笔记之directive—scope选项与绑定策略
From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inherit ...
- AngularJS学习笔记之directive——scope选项与绑定策略
开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细 ...
- AngularJS学习笔记(三) 单页面webApp和路由(ng-route)
就我现在的认识,路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了.因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
随机推荐
- javascript 基础学习整理 二 之 html对象总结，参考W3C
Anchor 对象 更改一个链接的文本.URL 以及 target 使用 focus() 和 blur() 向超链接添加快捷键 Document 对象 使用 document.write() 向输出流 ...
- 【转】java参数传递（超经典）
原文网址:http://blog.sina.com.cn/s/blog_4b622a8e0100c1bo.html Java中的参数传递机制一直以来大家都争论不休,究竟是“传值”还是“传址(传引用)” ...
- 【模拟】NEERC15 E Easy Problemset (2015-2016 ACM-ICPC)(Codeforces GYM 100851)
题目链接: http://codeforces.com/gym/100851 题目大意: N个人,每个人有pi个物品,每个物品价值为0~49.每次从1~n顺序选当前这个人的物品,如果这个物品的价值&g ...
- bzoj 1010 [HNOI2008]玩具装箱toy（DP的斜率优化）
1010: [HNOI2008]玩具装箱toy Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 7874 Solved: 3047[Submit][St ...
- 《Linear Algebra and Its Applications》-chaper3-行列式-行列式初等变换
承接上一篇文章对行列式的引入,这篇文章将进一步记录关于行列式的有关内容,包括如下的几个方面: (1)行列式3个初等变换的证明. (2)转置行列式与原行列式相等的证明. (3)定理det(AB) = d ...
- python 解析xml 文件: SAX方式
环境 python:3.4.4 准备xml文件 首先新建一个xml文件,countries.xml.内容是在python官网上看到的. <?xml version="1.0" ...
- RCMTM _百度百科
RCMTM _百度百科 RCMTM
- SSL证书的分类（按功能）
SSL证书的分类(按功能) 一.域名型证书 DV SSL DV SSL 证书是 Domain Validation SSL Certificate 英文全称的简写,翻译成中文是域名型 SSL证书 或 ...
- poj1019
有一个序列 1 12 123 1234 ..... ........ ........... 12345678910 ................................ 求第n个数字是什 ...
- Java中this的功能与作用
粗粒度上来说,Java中关键字this主要有2个功能: 1.表示“当前对象”的引用 (1)作为参数传入 [程序实例1] public class MyObject { public Integer v ...