angularJS指令相关

本文详细介绍了AngularJS中指令的工作原理及使用方式,包括restrict模式的AEMCA定义、template缓存机制、replace与transclude的功能,以及compile与link阶段的具体操作流程。此外还探讨了指令间如何通过scope进行交互的不同策略。

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

  • restrict——匹配模式
    • AEMC
    • A:attribute     <div hello></div>
    • E: element     <hello></hello>
    • M: comment    <!-- directive:hello -->
    • C: class   <div class="hello"></div>
    • 推荐使用A和E,即元素和属性的方式来使用指令
  • template——模板
    • $templateCache的get和put
  • replace——
  • transclude
  • complie与link
    • 加载,加载angular.js,找到ng-app指令
    • 编译,遍历DOM结构,找到所有指令,根据指令代码中的template1等转换DOM结构,如果有complile则会运行complie
    • 链接,对每条指令的link调用,在指令里操作DOM,绑定事件监听器。


  • 指令与控制器之间的交互
  • 指令之间的交互
  • scope的绑定策略
    • @——把当前属性作为字符串传递I,还可以绑定来自外层scope的值,在属性值中插入{{}}即可。
    • =——与父scope中的属性进行双向绑定
    • &——传递一个来自I父scope的函数,稍后调用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值