angular directive自定义指令

先来看一下自定义指令的写法

app.directive('', ['', function(){// Runs during compilereturn {// name: '',// priority: 1,// terminal: true,// scope: {}, // {} = isolate, true = child, false/undefined = no change// controller: function($scope, $element, $attrs, $transclude) {},// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements// restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment// template: '',// templateUrl: '',// replace: true,// transclude: true,// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
                link: function($scope, iElm, iAttrs, controller) {}};}]);

restrict : A E C M A代表attribute属性，E代表element元素，C代表class类，M代表注释（C和M基本不用）

priority：指令的优先级 ng-repeat的优先级为1000最大，默认的优先级为1

terminal: 是否禁止低于当前优先级的指令

template:html字符串/返回html的函数

templateUrl:' ',这个不解释了，一时想不起来怎么解释了

replace : true/false　　true会替换掉标签<hello>内所有的内容浏览器，除了transclude的内容 / false不会替换，遇见不识别的标签只是忽略了

transclude : true/false true保留原始的html放置在有ng-transclude指令的标签里 transclude 和replace结合使用可以保留自定义标签里想要的内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>replaceDemo</title><script src="../Scripts/angular-1.5.8/angular.min.js"></script><script>//replace为//1 true会替换掉标签<hello>内所有的内容 浏览器 ，除了transclude的内容，//2 false不会替换，遇见不识别的标签只是忽略了//transclude 和replace结合使用可以保留自定义标签里想要的内容
        angular.module('myApp',[]).directive("hello",function(){return {restrict:'E',template:'<div>Hi here <sapn ng-transclude></sapn></div>',replace:true,transclude:true}})</script>
</head>
<body ng-app="myApp"><hello><br><span>原始的内容，</span><br/><span>还会在这里。</span></hello>
</body>
</html>

View Code

scope: false,true,对象{}

false: 当前定义的指令使用父作用域（父作用域和子作用域一样共享）
true：当前指令继承父作用域（子作用域有父作用域的所有数据，但父作用域就不一定有子作用域的一些隐私的数据了，就像儿子从父亲那里继承一样，父亲能从儿子那能得到多少就呵呵了）
对象{}: 指定一些数据从父作用域中继承过来

对象的详细用法：形如scope:{string:'@string',//@单向绑定data:'=data',//=双向绑定function:'&function'//&继承父作用域的函数
}
提示 @ = 后面跟的都是属性使用restrict: 'E' 作为元素<say-hello><say-hello speak="{{content}}">美女</say-hello>con:'@speak'<say-hello speak="content">美女</say-hello>con:'=speak'
使用restrict:'A' 作为属性<div say-hello><div say-hello speak="{{content}}">美女</div>con:'@speak'<div say-hello speak="content">美女</div>con:'=speak'<div say-hello="{{content}}">美女</div>con:'@sayHello'<div say-hello="content">美女</div>con:'=sayHello'

&的使用（写代码的时候总是出错有时不是代码错了，有可能是是没有深度刷新ctrl+F5）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="../Scripts/angular-1.5.8/angular.min.js"></script></head>
<body><div ng-app="testApp" ng-controller="testC"><say-hello on-send="onSend()">heng</say-hello><div say-hello on-send="onSend()">hehe</div></div><script>angular.module("testApp",[]).controller('testC',function($scope){$scope.onSend=function(){console.log('hehe')};}).directive("sayHello",function(){return {restrict:'EA',scope:{send:'&onSend'},transclude:true,template:'<div><button ng-click="send()">directive</button><span ng-transclude></span></div>',controller:function($scope){$scope.send();}}})</script>
</body>
</html>

View Code

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="../Scripts/angular-1.5.8/angular.min.js"></script></head>
<body><div ng-app="testApp" ng-controller="testC">{{content}}<say-hello speak="content">美女</say-hello></div><script>angular.module("testApp",[]).controller('testC',function($scope){$scope.content="早上好";}).directive("sayHello",function(){return {restrict:'E',transclude:true,template:'<div>Hi ! <b ng-transclude></b>{{con}}{{content}}</div>',scope:{con:'=speak',},controller:function($scope){//$scope.con="hehe";//$scope.content="haha"
                }}})</script>
</body>
</html>

View Code

controller：自定义指令的控制器

require : 'ngModel'或者形如'^?accordion' ngModel是ng-model的控制器详情，accordion是继承其他的控制器， ^代表在父级作用域查找，？代表未查找到不抛出异常，默认在自身作用域查找

link:function(scope,element,attribute,controller){}

　　scope:当前作用域，element:当前指令的DOM节点,attribute：当前指令的属性，controller当前指令的控制器

　　有人会问两个controller？

　　关于directive里的link和controller区别？
　　1、执行顺序：先controller后link
　　2、何时使用controller：一般场景下都不想要使用controller，只需要把逻辑写在link中就可以了；用controller的场景就是该指令（假设为a）会被其他指令（假设为b）require的时候，这样就会在b指令的link函数中传入这个controller（如果require多个的话，传入的是一个数组，数组中存放的是每一个require的指令对应的controller），目的很显然是为了指令间进行交流的。

compile这里就不介绍了只要就到这里，好像用了link就不需要compile...

下面是两个实例的代码，折叠和手风琴

　　参考：http://www.360doc.com/content/15/0602/16/203871_475147642.shtml

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>折叠</title><script src="../Scripts/angular-1.5.8/angular.min.js"></script><script>var app=angular.module("myApp",[]);app.controller("testCtrl",function($scope){$scope.title="个人简介";$scope.text="我是一个程序员";})app.directive("expander",function(){return {restrict:'E',template:'<div><h3 ng-click="toggle()">{{title}}</h3><div ng-transclude ng-show="showText"></div></div>',transclude:true,replace:true,scope:{title:'=etitle'},link:function(scope,elem,attr,controller){scope.showText=false;scope.toggle=function(){scope.showText=!scope.showText;}}}})</script>
</head>
<body ng-app="myApp"><div ng-controller="testCtrl"><expander etitle="title">{{text}}</expander><expander etitle="title">{{text}}</expander></div>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>手风琴</title><script src="../Scripts/angular-1.5.8/angular.min.js"></script><script>var app=angular.module("myApp",[]);app.controller("testCtrl",function($scope){$scope.expanders=[{title:'个人简介',text:'我是一个程序员'},{title:'个人简介1',text:'我是一个程序员'},{title:'个人简介2',text:'我是一个程序员'}]})app.directive("accordion",function(){return {restrict:'E',template:'<div ng-transclude></div>',transclude:true,replace:true,controller:function(){var expanders=[];this.getSelected=function(selected){angular.forEach(expanders,function(e){if(selected!=e){e.showText=false;}})}this.add=function(e){expanders.push(e);}}}})app.directive("expander",function(){return {restrict:'E',template:'<div><h3 ng-click="toggle()">{{title}}</h3><div ng-transclude ng-show="showText"></div></div>',transclude:true,replace:true,scope:{title:'=etitle'},require:'^?accordion',//'accordin'是在自身作用域查找，^ 在父作用域查找 ，？没有查找到不会抛出异常
                link:function(scope,elem,attr,controller){console.log(scope);scope.showText=false;controller.add(scope)scope.toggle=function(){scope.showText=!scope.showText;controller.getSelected(scope);}}}})/*1、执行顺序：先controller后link2、何时使用controller：一般场景下都不想要使用controller，只需要把逻辑写在link中就可以了；用controller的场景就是该指令（假设为a）会被其他指令（假设为b）require的时候，这样就会在b指令的link函数中传入这个controller（如果require多个的话，传入的是一个数组，数组中存放的是每一个require的指令对应的controller），目的很显然是为了指令间进行交流的。*/</script>
</head>
<body ng-app="myApp"><div ng-controller="testCtrl"><accordion><expander ng-repeat="expander in expanders" etitle="expander.title">{{expander.text}}</expander></accordion></div>
</body>
</html>

View Code

--内容只是作为笔记，有些东西纯属仿照--

参考文档：http://www.cnblogs.com/webHero/p/5770703.html

转载于:https://www.cnblogs.com/tonghaolang/p/6040462.html

angular directive自定义指令相关推荐

angular的自定义指令---详解
1.angualr指令在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的 ...
Angular 基于自定义指令的内容投影 content projection 问题的单步调试
问题描述本文涉及到的代码位置:https://github.com/wangzixi-diablo/ngDynamic 我有一个能接受内容投影的 Angular Component: 具体投影内容, ...
angular创建自定义指令的四种方式
angular除了内置的部分指令,还可以通过.directive来自定义指令.要调用自定义指令,HTML 元素上需要添加自定义指令名.使用驼峰法来命名一个指令:nsHeader,在调用时使用需要-来分 ...
angular.js自定义指令
angular.js最为强大的地方在于可以通过自定义指令来扩展html元素,这种思路与JSP的taglib类似,但在实现细节上更为自由,并且自定义指令也可以提供表单元素交互.数据绑定.事件处理功能. ...
Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...
Vue directive 自定义指令
Vue自定义指令一共有5个钩子函数,分别是: bind.inserted.update.componentUpdate .unbind bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行 ...
slot插槽以及directive自定义指令的使用
slot 插槽的基础使用页面 A.vue 默认情况下,在使用组件的时候,提供的内容会被填充到名字为 default 的插槽中 <Left><p>这段话会被插入到Left组件的 ...
vue.directive自定义指令 vue.set使用示例
【Vue2】自定义指令 directives 过滤器 filter
自定义指令 directives directives 的简写我们可以通过配置项 directives 来自定义指令自定义指令时直接写指令名 XXX,使用时需要加上前缀为 v-XXX <di ...

angular directive自定义指令

angular directive自定义指令相关推荐

最新文章

热门文章