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)的概览,并说明 ...
随机推荐
- COJ 0349 WZJ的旅行（五）
WZJ的旅行(五) 难度级别:E: 运行时间限制:3000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 WZJ又要去旅行了T^T=0.幻想国由N个城市组成,由于道 ...
- Visual Studio Code尝试体验
背景了解 偶然间看到一篇大赞Visual Studio Code的文章,就搜索了一下,发现网上基本一致的好评.虽然微软在2015年4月29号 Build 2015 大会上才发布,但免费,轻量,跨平台版 ...
- 南京Uber优步司机奖励政策（1月11日~1月17日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- the identity used to sign the executable is no longer valid.解决方法
the identity used to sign the executable is no longer valid.解决方法 一.重新下载Provisioning Profile 1.到devel ...
- XPath与Xquery
XPath 和 XQuery 在某些方面很相似.XPath 还是 XQuery 完整不可分割的一部分.这两种语言都能够从 XML 文档或者 XML 文档存储库中选择数据.本文简要介绍了 XPath 和 ...
- Java自动装箱和自动拆箱操作
1.Java数据类型 在介绍Java的自动装箱和拆箱之前,我们先来了解一下Java的基本数据类型. 在Java中,数据类型可以分为两大种,Primitive Type(基本类型)和Reference ...
- nginx 配置301转发
学习nginx 推荐 http://www.nginx.cn/nginx-how-to 1. 设置域名解析 daijun.me 指向 234.33.22.21 2.主机234.33.22.21 ngi ...
- UTR#2 T1
题意:给定一个n,以下n个数(假定为fi),要求构造一个n个数的序列,使得这个序列每一个位置的最大上升子序列的长度等于对应的fi. 其实这道题是个很简单的题,之前7月也在BC上做到过,为什么要写呢,因 ...
- 使用Xcode8的Instruments检测解决iOS内存泄露（leak）
在苹果没有出ARC(自动内存管理机制)时,我们几乎有一半的开发时间都耗费在这么管理内存上.后来苹果很人性的出了ARC,虽然在很大程度上,帮助我们开发者节省了精力和时间.但是我们在开发过程中,由于种种原 ...
- Thinking in C++: Pointers to members 指向成员的指针
通常来说,一个指针(pointer)是一个存储地址的变量,你能在运行时去改变它,并且指针可以指向数据或函数. 但在C++中,指向成员的指针(pointer-to-member)指向的是class或st ...