最近开始研究并使用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. centos安装EPEL repo

    What is EPEL EPEL (Extra Packages for Enterprise Linux) is open source and free community based repo ...

  2. 【Java】关于MyBatis框架的总结

    最近在学习MyBatis框架,我在这里记录一下学习MyBatis过程中的心得体会. Mybatis是什么?使用它我们可以做什么? MyBatis是一个开源的数据持久层框架,它内部封装了通过JDBC访问 ...

  3. 解决《UNIX环境高级编程》(APUE)示例代码的编译问题

    转自 http://cunsheng.sinaapp.com/?p=360 APUE中示例很多, 把这些源码拿来跑跑调调对学习理解有着莫大的帮助, 随书网站就提供了源码下载, 不过我自己在Linux和 ...

  4. IT? 挨踢

    中国的IT,是最憋屈的IT. 他们掌握着正常人看不懂的英文+字母+标点符号组成的各类代码语言 他们像作者一样从无到有,从空白的白纸上敲出上千上万条华丽的计算机语言 但是他们承受着正常人的鄙视: 我的需 ...

  5. Java并发之线程池ThreadPoolExecutor源码分析学习

    线程池学习 以下所有内容以及源码分析都是基于JDK1.8的,请知悉. 我写博客就真的比较没有顺序了,这可能跟我的学习方式有关,我自己也觉得这样挺不好的,但是没办法说服自己去改变,所以也只能这样想到什么 ...

  6. android 对话框全屏

    对话框风格 <style name="Lam.Dialog.FullScreen" parent="@style/Theme.AppCompat.Dialog&qu ...

  7. What-is-DevOps

    https://www.quora.com/What-is-DevOps https://neoteric.eu/blog/devops-a-culture-of-getting-things-don ...

  8. linux每日命令(35)：grep命令

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

  9. HeroKu PaaS模式

    从HeroKu的官网看到一副流程图,演示了其提倡的应用构建通道,让包括个人开发者.创业团队.乃至各种规模的业务都能以自己的方式使用它,剩下的就是交给用户去开发出优秀的应用. 在开发者和应用的用户之间, ...

  10. npm国内镜像

    国内使用默认的源安装较慢,镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在): 1.通过config命令 npm config set registry h ...