最近开始研究并使用angular,今天就来简单讲讲对于ng中自定义指令的一下使用心得吧！

相信用过ng的人都对ng中的指令有所了解，指令，我将其理解为AngularJS操作HTML element的一种途径。 ng中内置了很多指令，其中ng-app, ng-model, ng-controller, ng-click, ng-hide, ng-show, ng-repeat, ng-bind, ng-class等等指令都是比较常用的，虽然内置指令还算丰富，不过对于日常项目中还是有很多功能需要自己来定义指令！

首先，所有的内置指令的前缀都为ng，所以不建议自定义指令使用该前缀，以免冲突。

在ng中使用directive()方法里自定义指令，第一个参数是指令名称字符串其命名方式为驼峰命名法，该函数返回一个对象；

　　　 restrict属性：指令匹配格式，（E）元素，（A）属性，（C）类，（M）注释；
          replace属性：设置是否从生成的DOM中移除自定义指令；
          transcluyde属性：设置是否将自定义标签里嵌套的元素添加到生成的dom中去；
          template属性：html字符串（模板），
          require属性：指定当前指令所依赖的指令，如： require:’^my'
          scope属性：隔离作用域（指令自己的作用域），内部的属性用来设置数据，’@‘表示绑定dom中的同名属性的值(绑定字符串)，'=someAttr'表示数据双向绑定，&传递父scope的函数并稍后调用；创建独立作用域：scope: {};
          compile方法：自定义指令编译，一般不使用，使用时注意要调用ng里默认的compile方法
          link方法：用来处理指令内部事务，一般用来操作dom，绑定事件监听等，它有四个参数，scope,element,attr,controller，一般常用前三个参数,
          controller方法：指令内部的方法，用来让指令暴露出一组公用的方供外部调用 ;
其中，我们在使用自定义指令时，使用最多的形式为（A）attr形式！
下面我们就自定义指令中常用的一些属性的使用，来简单的举几个例子！
我们先来看一个简单的例子：
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>ng之自定义指令</title>

    <script type="text/javascript" src="angular.js"></script>

    <script type="text/javascript">

        var app = angular.module('myApp', []);

　　　　 //注意，这里的指令名使用全部小写

        app.directive('mydirective', function() {

            return {

                restrict: 'E',

                replace: true,

                template: '<h1>hello world!</h1>'

            };

        });

    </script>

</head> 

<body ng-app='myApp'>

    <myDirective></myDirective>

</body>

</html>

上面的例子在浏览器打开之后，在页面会显示hello world!;

注意：在我们自定指令的时候，这里有个小坑，如果你在页面的指令写法是my-directive, 在自定指令的时候指令名得写成驼峰方式'myDirective'。如果在页面中写的是驼峰方式<myDirective>, 在自定义指令的时候必须的全部写成小写'mydirective',否则无法匹配到！

上面是一个简单的例子，这里没有使用scope，link等常用的属性，我们接着看下面这个例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>ng之自定义指令</title>

    <script type="text/javascript" src="angular.js"></script>

    <script type="text/javascript">

        var app = angular.module('myApp', []);

        app.directive('hello', function() {

            return {

                restrict: 'A',

                replace: true,

                scope: {

                    myurl: '=', //数据绑定

                    linktext: '@'//绑定dom中同名的属性

                },

                template: '<div><label>我的网站:</label><input type="text"ng-model="myurl" />'

                + '<a href="{{myurl}}">{{linktext}}</a></div>'

            }

        })

    </script>

</head> 

<body ng-app='myApp'>

    <div ng-init="myUrl='www.baidu.com'">

        <div myUrl="myUrl" linkText='这是一个测试' hello></div>

    </div>

</body>

</html>

上面这段代码使用了scope，其中myurl使用的是'='数据双向绑定，也就是说他会随着用户输入的值而改变，linktext使用的是'@'绑定同名属性的值，相当于引用！具体结果大家可以复制以上代码用浏览器打开看看就知道了，这里主要是说明自定义指令中scope的用法！

下面我们在来看看link的用法：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>ng之自定义指令</title>

    <script type="text/javascript" src="angular.js"></script>

    <script type="text/javascript">

        var app = angular.module('myApp', []);

        app.directive('world', function() {

            return {

                restrict: 'A',

                replace: true,

                scope: {

                    myname: '@', //数据绑定

                    mysex: '@'//绑定dom中同名的属性

                },

                link: function(scope, ele, attr) {

                    ele.bind('click', function() {

                        alert('我是' + scope.myname + ',我是' + scope.mysex + '生！');

                    })

                }

            }

        })

    </script>

</head> 

<body ng-app='myApp'>

    <div>

        <div myName="小明" mySex='男' world>点我点我</div>

    </div>

</body>

</html>

大家把上面的代码用浏览器打开看看，就会发现当你点击页面中‘‘点我点我’’这段文字的时候，会弹窗一个alert提示，而这里的点击事件其实就是在自定义指令world的link属性里去绑定的，从这里不难看出，在ng中一般通过自定义指令的link属性去进行各种dom操作会比较方便，包括事件绑定等！而且我个人非常喜欢用指令制作各种插件，目前制作过的有 页面拖拽，字符验证，时间转换，弹框提示等等！这里需要说明一下，ng在解析并编译完指令之后，就会调用指令中的link方法！而指令中的compile方法就是可以自定义指令编译的，只是一般用的较少，而且在自己定义编译指令时，需要手动调用ng内置的compile方法，并且在方法结尾需要返回一个link函数！

下面我们就看一下用compile来改写一下上面的world指令：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>ng之自定义指令</title>

    <script type="text/javascript" src="angular.js"></script>

    <script type="text/javascript">

        var app = angular.module('myApp', []);

        app.directive('world', function() {

            return {

                restrict: 'A',

                replace: true,

                scope: {

                    myname: '@', //数据绑定

                    mysex: '@'//绑定dom中同名的属性

                },

                compile: function(container, attr) {

                    return function(scope, ele, attr) {

                        ele.bind('click', function() {

                            alert('我是' + scope.myname + ',我是' + scope.mysex + '生！');

                        })

                    }

                }

            }

        })

    </script>

</head> 

<body ng-app='myApp'>

    <div>

        <div myName="小明" mySex='男' world>点我点我</div>

    </div>

</body>

</html>

大家可以在页面运行一下看看，效果是和我们第一个定义的world指令效果一样！

自此，ng中自定义指令的一下常用属性就简单的说完了，当然还有一些如：transcluyde(嵌套), require(依赖)这两个属性，就需要大家自己去研究一下了，这里就不在多说了！感谢大家！

　　

ng之自定义指令的更多相关文章

  1. ng-repeat里创建的自定义指令

    在ng里,所有的指令在按照意愿正常工作之前的都需要编译一下,包含angularJS的自定义指令. ng模板里的所有指令都会在angularJS加载完毕之后编译一下,所以那些自定义指令和事件才能工作. ...

  2. 走进AngularJs(五)自定义指令----（下）

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  3. 走进AngularJs(四)自定义指令----（中）

    上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...

  4. 走进AngularJs(三)自定义指令-----（上）

    一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...

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

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

  6. AngularJS -- 指令(创建自定义指令)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/   什么是指令 注:本指南是针对已经熟悉AngularJS基础知识的开发人员.如果你才刚 ...

  7. Angular17 Angular自定义指令

    1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...

  8. AngualrJS之自定义指令

    一.指令 指令directive是AngularJS的核心之一 包括 - 用于扩展HTML元素.属性的指令 - 执行特定功能的指令 - 自定义指令 内置指令基本上都是以ng-开头 二.内置指令 1.属 ...

  9. AngularJS学习笔记（五）自定义指令（1）

    先来说说自定义指令 ng通过内置指令的方式实现了对html的增强,同时也赋予了我们自定义指令的功能,让我们根据实际需求进行指令的定制.自定义指令涉及到模板(template).作用域(scope).数 ...

随机推荐

  1. Spark2.2+ES6.4.2（三十二）：ES API之index的create/update/delete/open/close（创建index时设置setting，并创建index后根据avro模板动态设置index的mapping）

    要想通过ES API对es的操作,必须获取到TransportClient对象,让后根据TransportClient获取到IndicesAdminClient对象后,方可以根据IndicesAdmi ...

  2. receiving error: 'Error: SSL Error: SELF_SIGNED_CERT_IN_CHAIN' while using npm

    From:https://stackoverflow.com/questions/9626990/receiving-error-error-ssl-error-self-signed-cert-in ...

  3. 分布式文件系统---GlusterFS

    1.1 分布式文件系统 1.1.1 什么是分布式文件系统 相对于本机端的文件系统而言,分布式文件系统(英语:Distributed file system, DFS),或是网络文件系统(英语:Netw ...

  4. 郑晔谈 Java 开发：新工具、新框架、新思维【转载】【整理】

    原文地址 导语:"我很惊讶地发现,现在许多程序员讨论的内容几乎和我十多年前刚开始做 Java 时几乎完全一样.要知道,我们生存的这个行业号称是变化飞快的.其实,这十几年时间,在开发领域已经有 ...

  5. Swift Defer 延迟调用

    1.Defer 在一些语言中,有 try/finally 这样的控制语句,比如 Java.这种语句可以让我们在 finally 代码块中执行必须要执行的代码,不管之前怎样的兴风作浪.在 Swift 2 ...

  6. 9.4 翻译系列：EF 6以及 EF Core中的NotMapped特性（EF 6 Code-First系列）

    原文链接:http://www.entityframeworktutorial.net/code-first/notmapped-dataannotations-attribute-in-code-f ...

  7. 【R作图】lattice包，画多个分布柱形图，hist图纵轴转换为百分比

    一开始用lattice包,感觉在多元数据的可视化方面,确实做得非常好.各种函数,可以实现任何想要实现的展示. barchart(y ~ x) y对x的直方图 bwplot(y ~ x) 盒形图 den ...

  8. 菜鸟要做架构师（二）——java性能优化之for循环

    完成同样的功能,用不同的代码来实现,性能上可能会有比较大的差别,所以对于一些性能敏感的模块来说,对代码进行一定的优化还是很有必要的.今天就来说一下java代码优化的事情,今天主要聊一下对于for(wh ...

  9. lua -- 所有UI组件的基类

    -- 组件行为基础 local Behavior = class("Behavior"); function Behavior:ctor(name) self.owner = ni ...

  10. linux每日命令(29)：chown命令

    chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷贝 ...