directive中controller、link和compile的区别

本文介绍了AngularJS中controller、link和compile的相关知识。controller参数可为字符串或函数,主要提供指令间复用行为;link只能在当前指令定义行为。compile负责模板DOM转换,link负责连接作用域和DOM,二者互斥,同时设置时compile返回函数会替代link。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

controller:

controller参数可以是一个字符串或一个函数。当设置为字符串时,会以字符串的值为名字,来查找注册在应用中的控制器的构造函数。

angular.module('app',[])
.directive('myDirective', function(){
     restrict: 'A'
     controller:'someController'
})
angular.module('app')
.controller('someController', function($scope, $element, $attrs, $transclude){
   ......
})

也可以在指令内部通过匿名函数的方式来定义一个内联的控制器:(可以将任意可以被注入的AngularJS服务传递给控制器,其中下面四个$scope、$element、$attrs、$transclude是相对特殊的。$scope是与指令元素相关联的当前作用域,$element是当前指令对应的元素,$attrs是由当前元素的属性组成的对象,$transclude嵌入链接函数会与对应的嵌入作用域进行预绑定,transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。)

angular.module('app',[])
.directive('myDirective', function(){
    restrict: 'A',
    controller:
    function($scope, $element, $attrs, $transclude){
        ......
    }
})

在控制器内部操作DOM仅推荐通过链接函数来实现。例如,通过指令添加一个a标签,可以在控制器内的$transclude函数中实现,如下所示(参考AngularJS权威指南):

controller与link的区别:

controller主要用来提供可在指令间服用的行为,link只能在当前指令中定义行为,无法在指令间复用。

实际应用中,函数在指令间复用使用controller,使用scope.$watch()或与DOM交互使用link。

compile选项可以返回一个对象或函数,如果设置了compile函数,说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。

compile和link的区别:

compile和link是互斥的。如果同时设置了这两个选项,compile所返回的函数会被当做link函数,而link本身会被忽略。

compile负责对模板DOM进行转换,link负责将作用域和DOM进行连接。link函数对绑定了实时数据的DOM具有控制能力,需要考虑性能问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值