AngularJS1.X学习笔记8-自定义指令（上）
AngulaJS的指令是一种非常强大的特性，一个ng-repeat就能让我们非常方便的展示一个数据列表，指令相当于是一个组件，为我们将一些东西封装起来了，提供了复用的可能性。个人认为自定义指令还是比较复杂的，下面开始攻关。
一、三个重要参数
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>获取数据</title>
</head>
<body ng-controller="directiveCtrul">
<h1 get-data>{{data}}</h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('directiveCtrul',function($scope){
$scope.data = "你好啊！";
})
.directive("getData",function(){
return function(scope,element,attrs){
console.log(scope['data'])
}
})
</script>
</body>
</html>
用directive方法创建自定义指令，directive方法有两个参数，第一个参数表示指令名字，第二个参数是一个工厂函数，工厂函数返回一个工人函数，工人函数有三个参数，分别表示应用指令元素的作用域，应用指令的元素的包装对象，应用指令的元素的特性对象。
二、生成元素，减少依赖，计算表达式
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>生成元素，减少依赖，处理变化</title>
</head>
<body ng-controller="directiveCtrul">
<div list-products='products' list-property="cat"></div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('directiveCtrul',function($scope){
$scope.products = [
{name:"苹果",cat:"水果",price:5.0,expiry:100000000},
{name:"香蕉",cat:"水果",price:6.0,expiry:9},
{name:"桃子",cat:"水果",price:7.0,expiry:7}, {name:"22",cat:"yy",price:5.0,expiry:5},
{name:"33",cat:"yy",price:9.0,expiry:6},
{name:"44",cat:"yy",price:4.0,expiry:2},
{name:"55",cat:"yy",price:8.0,expiry:4}, {name:"ww",cat:"tt",price:4.0,expiry:7},
{name:"qq",cat:"tt",price:3.0,expiry:9}, ];
})
.directive("listProducts",function(){
return function(scope,element,attrs){
var data = scope[attrs['listProducts']];
console.log(data.length)
var property = attrs['listProperty'];
var listElem = angular.element("<ul>"); for (var i = data.length - 1; i >=0; i--) {
//(function(){
listElem.append(angular.element("<li>")
.text(data[i][property]));
//})() }
element.append(listElem); }
})
</script>
</body>
</html>
上面的例子中，更具list-products 属性值从作用域拿到指定数据，通过list-property属性获取要显示的属性，用这个属性减少了依赖，这样做没有将要显示的属性写死，增加了灵活性。还存在一个问题就是如果对要显示的属性应用了过滤器，那么上述指令将无法工作，解决方法是使用计算表达式。像这个样子
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>生成元素，减少依赖，处理变化</title>
</head>
<body ng-controller="directiveCtrul">
<div list-products='products' list-property="price | currency"></div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('directiveCtrul',function($scope){
$scope.products = [
{name:"苹果",cat:"水果",price:5.0,expiry:100000000},
{name:"香蕉",cat:"水果",price:6.0,expiry:9},
{name:"桃子",cat:"水果",price:7.0,expiry:7}, {name:"22",cat:"yy",price:5.0,expiry:5},
{name:"33",cat:"yy",price:9.0,expiry:6},
{name:"44",cat:"yy",price:4.0,expiry:2},
{name:"55",cat:"yy",price:8.0,expiry:4}, {name:"ww",cat:"tt",price:4.0,expiry:7},
{name:"qq",cat:"tt",price:3.0,expiry:9}, ];
})
.directive("listProducts",function(){
return function(scope,element,attrs){
var data = scope[attrs['listProducts']];
console.log(data.length)
var property = attrs['listProperty'];
var listElem = angular.element("<ul>"); for (var i = data.length - 1; i >=0; i--) {
//(function(){
listElem.append(angular.element("<li>")
.text(scope.$eval(property,data[i])));
//})() }
element.append(listElem); }
})
</script>
</body>
</html>
三、响应数据变化
有时候我们的数据模型可能会发生变化，这个时候我们的指令中显示的数据也应该相应发生变化才对。
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>响应变化</title>
</head>
<body ng-controller="directiveCtrul">
<div dir> </div>
<button ng-click="change()">改变</button>
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('directiveCtrul',function($scope){
$scope.data = "原来的数据";
var isChange = false;
$scope.change = function(){
if(!isChange){
$scope.data = '新数据';
isChange=!isChange;
}else{
$scope.data = '原来的数据';
isChange=!isChange;
} }
})
.directive("dir",function(){
return function(scope,element,attrs){
var data = scope['data'];
var h = angular.element('<h1>').text(data);
element.append(h);
scope.$watch('data',function(newvalue,oldvalue){
h.text(newvalue); }) }
})
</script>
</body>
</html>
用一个$watch监控我们可能发生变化的数据就可以了。
四、关于jqLite
jqLite是迷你版的jQuery，更jquery差不多。下面给出其重要的方法以备参考，不做展开。
1、遍历DOM
| 方法 | 干嘛的 |
| children() | 找儿子 |
| eq(index) | 从一组元素中返回指定位置的元素 |
| find(selector) | 从后代中找指定的选择器的元素 |
| next() | 找弟弟 |
| parent() | 找爸爸 |
2、修改元素
| 方法 | 干嘛的 |
| addClass(name) | 将选择的元素加一个class |
| attr(name,[value]) | 获取或设置特性值 |
| css(name,[vlaue]) | 获取或设置一个css属性值 |
| hasClass(name) | 判断有没有指定的class |
| prop(name,[value]) | 获取或设置第一个元素的值 |
| removeAttr(name) | 移除一个特性 |
| removeClass(name) | 移除一个class |
| text([value]) | 设置或获得元素的文本 |
| toggleClass(name) | 切换class |
| val([value]) | 设置或者获取value值 |
3、创建与移除元素
| 方法 | 干嘛的 |
| angular.element(html) | 创建 |
| after(ele) | 在后插入 |
| append(ele) | 作为最后的子元素插入 |
| clone() | 克隆 |
| prepend(ele) | 作为第一个子元素插入 |
| remove() | 移出 |
| replacewidth(ele) | 替换 |
| wrap(ele) | 包裹 |
4、事件相关
| 方法 | 干嘛的 |
| on(event,handler) | 绑定事件 |
| off(event,handler) | 移出事件 |
| triggerHandler(event) | 触发事件 |
本文来了一个指令的开胃菜，接下来学习更加复杂的指令。
AngularJS1.X学习笔记8-自定义指令（上）的更多相关文章
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS1.X学习笔记10-自定义指令（下）
继续继续,学完这个部分就去吃饭.引用自由男人的话作为本文的开始:“默认情况下,链接函数被传入了控制器的作用域,而该控制器管理着的视图包含了指令所应用到的元素”.果然像是绕口令,还是看看你的例子比较好. ...
- AngularJS1.X学习笔记9-自定义指令（中）
今天好大的雨啊!上一节中,我们的指令中的工厂函数中都是返回了一个叫做链接函数的工人函数,事实上我们的工厂函数也是可以返回一个对象,这个对象里面可以包含很多的属性,这使得我们可以创建更加强大的指令. 一 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- Hadoop学习笔记—5.自定义类型处理手机上网日志
转载自http://www.cnblogs.com/edisonchou/p/4288737.html Hadoop学习笔记—5.自定义类型处理手机上网日志 一.测试数据:手机上网日志 1.1 关于这 ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则
ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...
- JVM学习笔记——字节码指令
JVM学习笔记——字节码指令 字节码 0与 1是计算机仅能识别的信号,经过0和1的不同组合产生了数字之上的操作.另外,通过不同的组合亦产生了各种字符.同样,可以通过不同的组合产生不同的机器指令.在不同 ...
随机推荐
- MySQL服务读取参数文件my.cnf的规律研究探索
在MySQL中,它是按什么顺序或规律去读取my.cnf配置文件的呢?其实只要你花一点功夫,实验测试一下就能弄清楚,下面的实验环境为5.7.21 MySQL Community Server.其它版本如 ...
- Java中常见数据结构List之LinkedList
二,LinkedList 1, linkedList底层数据结构 linkedList底层是一个双向链表 2,LinkedList和ArrayList的对比 1.顺序插入速度ArrayList会比较快 ...
- R语言学习 第八篇：常用的数据处理函数
Basic包是R语言预装的开发包,包含了常用的数据处理函数,可以对数据进行简单地清理和转换,也可以在使用其他转换函数之前,对数据进行预处理,必须熟练掌握常用的数据处理函数,本文分享在数据处理时,经常使 ...
- php类中双冒号和->的区别
就是为了区分对象的方法和属性,和是访问类的静态方法和静态变量,类的静态方法和静态变量是类公用的,不需要实例化也能访问,而对象的方法和属性是每个对象特有的,因此必须先实例化.其他语言如C++,JAVA等 ...
- Windows Server 2019 预览版介绍
在Windows server 2012.Windows server 2016还未完全普及的情况下,昨天Windows Server团队宣布Windows Server 2019将在2018年的下半 ...
- ibatis annotations 注解方式返回刚插入的自增长主键ID的值
mybatis提供了注解方式编写sql,省去了配置并编写xml mapper文件的麻烦,今天遇到了获取自增长主键返回值的问题,发现相关问答比较少,还好最后还是圆满解决了,现把重点记录一下,解决问题的关 ...
- Maven-04: 三套生命周期
Maven的生命周期不是一个整体,而是拥有三套相互独立的生命周期,它们分别是clean,default和site. clean生命周期的目的是清理项目. default生命周期的目的是构建项目. si ...
- ELK学习笔记（二）-HelloWorld实例+Kibana介绍
这次我们通过一个最简单的HelloWolrd来了解一下ELK的使用. 进入logstash的config目录,创建stdin.conf 文件. input{ stdin{ } } output{ st ...
- [bzoj1601]灌水_kruskal
灌水 bzoj-1601 题目大意:给你n块地,将两块地之间连通有代价$P_{i,j}$,单独在一块地打井需要代价$C_i$,问将所有的井都有水的代价是多少. 注释:1<=n<=300. ...
- Django+xadmin打造在线教育平台（八）
十一.用户信息 11.1.个人信息展示 (1)新建‘usercenter-bae.html’当母板 {% load staticfiles %} <!DOCTYPE html> <h ...