自定义指令编译步骤

<图为一个元素上有2个指令的情况>

把指令标签转换为dom结构,执行complie方法,compile方法返回的就是Link函数,所以如果指令配置了compile方法,就不需要再配置Link方法了,

compile方法有3个参数tElement,tAttrs,transclude,tElement是该指令标签的JQuery对象,transclude是原始数据里的内容

compile:function(tElement,tAttrs,transclude){

  tElement.append(angular.element("<div>content</div>"));//这种方式可以给该标签增加内容

  return {pre:function(scope,iElement,iAttrs,controller){},post:function(scope,iElement,iAttrs,controller){}}//这就是Link方法,它包含两个属性,pre指在指令连接到子元素之前运行该方法,post指令连接到子元素之后运行该方法

}

一般compile方法用来改变dom结构,link方法用来给该指令元素绑定事件,Link方法包含4个参数scope,iElement,iAttrs,controller

Link:function(scope,iElement,iAttrs,ctrlname){//scope是当前指令元素的作用域,ctrlname是该指令元素的控制器名

  iElement.on('click',function(){

    scope.$apply(function(){ //在控制器里改变视图模板里的内容必须用脏检查$apply方法,除非该元素用了ng-model指令绑定了数据

        scope.user.name='new name';

    })

  })

}

指令的配置对象里还有一个controller属性

controller:function($scope){};//给该指令元素创建一个控制器

controllerAs:'ctrlname';//给该控制器取一个名字

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值