AngularJS自定义指令directive()
在学习自定义指令,分享一篇文章。 var app = angular.module('myapp',[]); return { restrict: 'AE',//推荐使用A replace: true,//template会覆盖掉自定义标签 template: '<h3>Hello World!</h3>' //自定义标签要显示的内容 } }); 第一个参数是指令的名称 第二个参数是一个返回指令定义对象的函数。如果你的指令对额外的对象/服务(services)例如 $rootScope,$http 或者 $compile 有依赖,它们也可以在其中被注入。 link函数和作用域 link函数是负责操作DOM元素,例如: app.directive('helloWorld',function(){ return { restrict: 'AE',replace: true,template: '<p></p>',link: function(scope,elem,attr){ elem.bind('click',function(){ elem.css('background-color','white'); scope.$apply(function(){ scope.color = "white"; }); }); elem.bind('mouSEOver',function(){ elem.css('cursor','pointer'); }); } } }); scope – 它代表指令被使用的作用域。在上面的例子中它等同于符控制器的作用域。 的背景颜色,而mouSEOver处理函数则将游标改变为pointer。模板中拥有表达式{{color}},它将随着父作用域中的模型color的变化而变化,从而改变了Hello World的背景色。 Compile函数 Compile函数主要用来在link函数运行之前进行一些DOM转化。它接收下面几个参数: tElement – 指令绑定的元素 app.directive('test',function(){ return { compile: function(tElem,attrs){ //在这里原则性的做一些DOM转换 return function(scope,attrs){ //这里编写link函数 } } } }); 大多数时候,你仅仅只需要编写link函数。这是因为大部分指令都只关心与注册事件监听器,监视器,更新DOM等等,它们在link函数中即可完成。像是ng-repeat这样的指令,需要多次克隆并重复DOM元素,就需要在link函数运行之前使用compile函数。你可能会问威慑呢么要将两个函数分别使用。为什么我们不能只编写一个函数?为了回答这个问题我们需要理解Angular是如何编译指令的! 指令是如何被编译的 在编译阶段之后就到了链接阶段(link phase),这时link函数就一个接一个的执行。在这个阶段中模板被生成,指令被运用到正确的作用域,DOM元素上开始有了事件监听器。不像是compile函数,lin函数会对每个指令的实例都执行一次。 改变指令的作用域 一个子作用域 – 这个作用域会原型继承父作用域。 app.directive('helloWorld',function(){ return { scope: true,//使用一个继承父作用域的自作用域 restrict: 'AE',template: '<h3>Hello World!</h3>' } }); app.directive('helloWorld',function(){ return { scope: {},//使用一个全新的隔离作用域 restrict: 'AE',template: '<h3>Hello World!</h3>' } }); 隔离作用域并不意味着你一点都不能获取到父作用域中的属性。有一些技巧可以使你访问父作用域中的属性同时监听这些属性的变化。我们将在下一篇文章中提到这种高级技巧。 原文地址:http://www.xgllSEO.com/?p=3511 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |