angular自定义指令

angular自定义指令

angularJS 中内置了很多指令，但是有时候这些内置的指令满足不了我们的需求，这时候我们就需要自己定义指令，angular中提供了自定义的指令的方法，使用关键字directive,下面介绍一下他的参数：

参         数	描         述
template	这是自定义指令的模板，一般放html文件。
replace	true/false 为true时表示替换使用指令的标签，用template的内容完全替换。为false时，在使用指令的标签内部添加template的内容，为true时，模板（template）必须有一个根节点。
transclude	true/false 这个要在模板中配合ng-transclude一起使用，为true时代表要保留使用指令的标签内部的内容。
restrict	匹配模式，表示定义的指令以哪种方式使用，它有四个值，E(ele)/A(attr)/C(class)/M(mark注释前提replace:true)
scope	true创建独立的scope,（创建的指令可以双向绑定数据而对指令的其他使用没有影响）；值也可以是一个对象，用来绑定属性或函数：@ ：把当前属性作为字符串传递，还可以绑定来自外层scope上的值，在属性中插入{{}}即可；=： 与父scope中的属性进行双向绑定；&：传递一个来自父scope中的函数，稍后调用。
link	如果需要操作DOM，要在link的函数中；参数有scope(指令对应的scope对象),element（指令所在DOM对象的jqLite对象，）,attrs（指令所在DOM对象的属性集）,controller（控制器的实例，在所有指令间共享，可以作为指令交流的通道）

指令的原理：1.加载  加载angular.js，找到ng-app之后，确定应用的边界。2.编译  遍历DOM，找到所有指令，根据指令中的template、replace和transclude转换DOM结构，如果存在compile函数就调用。3.链接  对每个指令操作link函数，link函数一般用来操作DOM,绑定事件监听器。

> 注：自定义指令的名称不能采用驼峰命名法


下面是示例：
<h1 apdir1>这是装饰型指令</h1>
<h2 apdir2>这是组件型指令</h2>
<apdir2></apdir2>
<div apdir3>保留这几个文字</div>

 var app = angular.module('app',[]);
//装饰性指令
app.directive('apdir1',function(){
    return {
        link:function(scope,ele,attrs){
            ele.on('mouseover',function(){
                ele.css({'color':'red'})
            }).on('mouseout',function(){
                ele.css({'color':'green'})
            })
        }
    }
});
//组件性指令
app.directive('apdir2',function(){
    return {
        //替换指令所在的标签，以模板代替,模板必须有一个根节点
        replace: true,
        template:'<h4>hello</h4>',
        //指令使用的类型 E:作为标签使用 A:作为属性使用 C:作为class类名使用  D:作为注释使用
        restrict:'EACM',
        //保留使用指令的标签内部的元素。
        transclude: true
    }
});

app.directive('apdir3',function(){
    return {
        //保留使用指令的标签内部的元素。
        transclude: true,
        replace: true,
        template:'<h4>hello<div ng-transclude></div></h4>',
        restrict:'EACM',
    }
})

转载于:https://www.cnblogs.com/rainbow8590/p/7239208.html