angularJS指令

来源：互联网发布：大学生网络兼职网编辑：程序博客网时间：2024/06/07 05:03

1.先来一段简单的小例子

<!doctype html><html lang="en" ng-app="myMoudle"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <hello></hello>    <script src="js/angular.min.js"></script>    <script>        var app=angular.module('myMoudle',[/*注入的模块 如ngAnimate等*/]);        app.directive('hello',['$window',function($window){            return{                restrict:"E",                template:"<div>你好</div>",                replace:true            }        }])    </script></body></html>

运行结果如下图所示：
这里写图片描述
首先，指令创建后，function里面会return一个对象，下面我来介绍一下这三个参数的意思：
1.restrict：匹配模式：

匹配模式作用示例 E element：元素（当作html标签使用） <hello></hello> A attribute：属性（当作标签属性来使用） <div hello></div> M 注释：当作注释来使用  C class：当作标签的class来使用 <div class="hello"></div>

2. template：html代码，代码字符串，也可以写成templateURL：html文件，只是后面跟着的代码类型不一样，如果代码简单，直接用template就可以了，如果复杂，建议建一个新的html文件，把要写的代码片段写到html文件中，然后通过templateURL来引入这一代码片段

3. repalce：元素嵌套，如果设置为false那么你所创建的directive指令名称也会随着引用而到dom树上去，如图所示：

这里写图片描述

如果这一选项设置为true的话，那么就不会使创建的directive指令名称引用到dom树上去，如图所示：

这里写图片描述

2.下面介绍稍微复杂点的

<script>        var app=angular.module('myMoudle',[/*注入的模块 如ngAnimate等*/]);        app.directive('hello',['$window',function($window){            return{                restrict:"E",                template:"<div>你好</div>",                replace:true,                scope{},                link:function(scope,element,attr){                }            }        }])    </script>

这里只写script标签了，html跟第一个一样，这里要说明一下这个scope

scope：

是指令内自己的作用域
有三种传递参数方法：
@：把当前实行作为字符串传递，你还可以绑定来自外层scope的值，在属性之中插入即可。
=：与父scope中的属性进行双向绑定，然后调用内置指令。
&：传递一个来自父scope的函数，然后调用内置指令。
下面我只介绍我在项目中运用过的=数据双向绑定的例子，其他的读者可以自己一试，都是很有趣的！
话不多说，直接上代码：

<!doctype html><html lang="en" ng-app="myMoudle"><head>    <meta charset="UTF-8">    <title>Document</title></head><body ng-controller="myCtrl">    <hello mynum='num'></hello>    <script src="js/angular.min.js"></script>    <script>        var app=angular.module('myMoudle',[/*注入的模块 如ngAnimate等*/]);        app.controller('myCtrl',['$scope',function($scope){            $scope.num=1;        }]);        app.directive('hello',['$window',function($window){            return{                restrict:"E",                template:"<div>你好</div>",                replace:true,                scope:{                    "mynum":"=",                },                link:function(scope,element,attr){                    console.log(scope.mynum)//结果是1                }            }        }])    </script></body></html>

大家，请注意看，我们又加了一个自己的控制器controller，然后在指令scope的定义域中定义了

scope:{    "mynum":"=",},

这样scope就可以跟自己所在的控制器controller的$scope中的变量进行双向绑定了，绑定方式为：

<hello mynum='num'></hello>

num是$scope中定义的变量，mynum是指令中scope中定义的变量，注意html中是不加双花括号的，这样我们就可以通过调scope.mynum来调用控制器controller中的$scope.num了
以下是运行结果：

这里写图片描述

link函数：

运行link函数一般用来操作DOM，绑定事件监听

link:function(scope,element,attr){        console.log(scope.mynum)//结果是1        element.bind('mouseenter',function(){        alert('我是大帅哥！')    })}

运行结果如下：

这里写图片描述

小结：

angularJS指令我只是把我自己在项目上用到的和自己的一些心得写出来，肯定写的不全，希望对大家有所帮助吧，我还得继续学习，继续进步，总得来说，angularjs指令创建它是为了指令复用，或者要操作DOM的时候创建一个指令，以后有什么要补充的我还会再加上的，拜拜！

1 0