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-自定义指令（上）的更多相关文章

  1. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

  2. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  3. AngularJS1.X学习笔记10-自定义指令（下）

    继续继续,学完这个部分就去吃饭.引用自由男人的话作为本文的开始:“默认情况下,链接函数被传入了控制器的作用域,而该控制器管理着的视图包含了指令所应用到的元素”.果然像是绕口令,还是看看你的例子比较好. ...

  4. AngularJS1.X学习笔记9-自定义指令（中）

    今天好大的雨啊!上一节中,我们的指令中的工厂函数中都是返回了一个叫做链接函数的工人函数,事实上我们的工厂函数也是可以返回一个对象,这个对象里面可以包含很多的属性,这使得我们可以创建更加强大的指令. 一 ...

  5. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  6. Hadoop学习笔记—5.自定义类型处理手机上网日志

    转载自http://www.cnblogs.com/edisonchou/p/4288737.html Hadoop学习笔记—5.自定义类型处理手机上网日志 一.测试数据:手机上网日志 1.1 关于这 ...

  7. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  8. 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 ...

  9. JVM学习笔记——字节码指令

    JVM学习笔记——字节码指令 字节码 0与 1是计算机仅能识别的信号,经过0和1的不同组合产生了数字之上的操作.另外,通过不同的组合亦产生了各种字符.同样,可以通过不同的组合产生不同的机器指令.在不同 ...

随机推荐

  1. C# + Javascript 实现评论回复功能

    首先先介绍一下前台 <script type="text/javascript"> function openWindow() { window.open(" ...

  2. 记一次线上Curator使用过程JVM栈溢出解决

       为了同学们看起来一目了,特按如下思路进行讲解. 1.出现的场景    2.分析及解决的过程    3.总结 最近公司要使用zookeeper做配置管理(后面简称ZK),然后自己就提前用虚拟机进行 ...

  3. P2P技术简介

    P2P技术简介 NAT( Network Address Translation)穿越(俗称打洞)技术 前言: p2p已经存在于我们生活的方方面面:我们通过下载在工具(比如迅雷,bitorent,各种 ...

  4. [转]Git教程【译】

    [转]Git教程[译] http://www.cnblogs.com/zhangjing230/archive/2012/05/09/2489745.html 原文出处:http://www.voge ...

  5. The method queryForMap(String, Object...) from the type JdbcTemplate refers to the missing type DataAccessException

    Add spring-tx jar of your spring version to your classpath.

  6. Python 3.6.4 / win10 使用pip安装keras时遇到依赖的PyYAML安装出错

    PS C:\Users\myjac\Desktop\simple-chinese-ocr> pip install keras Collecting keras Downloading http ...

  7. Spring容器中Bean的生命周期

  8. spring - boot 监控管理模块搭建

    Spring-Actuator是Spring-boot对应用监控的集成模块,提供了我们对服务器进行监控的支持,使我们更直观的获取应用程序中加载的应用配置.环境变量.自动化配置报告等. 使用Spring ...

  9. 造轮子-Java泛型堆排

    个人博客地址:http://kyle.org.cn/2018/03/13/heapsort/ Java实现泛型堆排算法,用于N个对象中选择最大或者最小的前M个,其中M<=N 类似于Mysql中o ...

  10. c++ --> static关键字总结

    static关键字总结 C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. ...