AngularJS 指令的 Scope (作用域)详解

之前写指令的时候对于scope的配置虽然都知道都用过,但是总是记不太清,配置的时候总要百度下看下说明。个人感觉一招制敌 - 玩转 AngularJS 指令的 Scope (作用域)这篇文章写的很不错,简单易懂,而且有代码示例。其中有些细节还是没有说的太透彻,我想总结记录下,方便以后自己以后翻阅,也希望对其他朋友有帮助。

情况一:scope:false (默认配置)

这种情况最为简单,指令与父作用域共享,无论在父作用域还是指令中修改模型数据,两边的视图都会发生改变。这里其实就是一个作用域。

情况二:scope:true

这种情况原文中写的也很好,当我们将scope设置为true的时候我们就新创建了一个作用域,只不过这个作用域是继承了我们的父作用域;我觉得可以这样理解,我们新创建的作用域是一个新的作用域,只不过在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。 但是有一点说的不是很清晰:新作用域的初始化是什么时候进行的?最初新作用域的数据也是指向父作用域的,此时我们更改父作用域的数据的值时,指令中的数据也会发生改变。当我们第一次改变指令中数据的值后,它才copy了父作用域的数据来进行初始化。在这之后我们在修改父作用域中的数据都不会对指令中的数据有影响了。

情况三:scope:{}

//代码摘抄自上面所提及的文章
scope: {
            name: '@myName', 
            age: '=',
            changeAge: '&changeMyAge' 
  }
  • @就知道这是一个单向的数据绑定,然后寻找原来的那个使用指令的元素上(或者是指令元素本身)含有这个值的属性即my-name={{name}},然后在父作用域查找{{name}}的值,得到之后传递给模板中的name。单向数据绑定,就是说父类改变时,指令数据会改变,而指令对应数据改变时,父类不会变化

  • =和&与@差不多,只不过=进行的是双向的数据绑定,不论模板还是父作用域上的属性的值发生改变都会使另一个值发生改变,而&是绑定函数而已。


以上主要是对一些细节做了简单描述,在此推荐下原文,写的却是很棒,是我学习的对象。第一次用到csdn的markdown还是不是太熟练,望见谅。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值