平凡公子

Theme

Angular之自定义指令

2016年1月13日

前言 ​

最近开始研究并使用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形式！ 下面我们就自定义指令中常用的一些属性的使用，来简单的举几个例子！

例子 ​

我们先来看一个简单的例子：

html
<!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!;

WARNING

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

scope用法 ​

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

html
<!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用法 ​

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

html
<!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用法 ​

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

html
<!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(依赖)这两个属性，就需要大家自己去研究一下了，这里就不在多说了！感谢大家！

转载说明 ​

本文允许全文转载，转载请注明来源： 平凡公子 - Angular之自定义指令

Copyright © 2024 by 平凡公子