AngularJS学习之绑定策略

来源:互联网 发布:台湾驱动透视源码 编辑:程序博客网 时间:2024/04/30 04:11

使用无数据的隔离作用域并不常见。 AngularJS提供了几种方法能够将指令内部的隔离作用域,同指令外部的作用域进行数据绑定。为了让新的指令作用域可以访问当前本地作用域中的变量,需要使用下面三种别名中的一种。

本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量:

@ (or @attr)

现在,可以在指令中使用绑定的字符串了。


双向绑定:通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变。

= (or =attr)


父级作用域绑定 通过&符号可以对父级作用域进行绑定,以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。要使调用带有一个参数的父方法,我们需要传递一个对象,这个对象的键是参数的名称,值是要传递给参数的内容。

& (or &attr)


例如,假设我们在开发一个电子邮件客户端,并且要创建一个电子邮件的文本输入框:

<input type="text" ng-model="to"/>
    <!-- 调用指令 -->
    <div scope-example ng-model="to"
    on-send="sendMail(email)"
    from-name="ari@fullstack.io" />

这里有一个数据模型(ng-model),一个函数(sendMail())和一个字符串(from-name)。
在指令中做如下设置以访问这些内容:

scope: {
    ngModel: '=', // ngModel同指定对象绑定
    onSend: '&', // 将引用传递给这个方法
    fromName: '@' // 储存与fromName相关联的字符串
}

双向数据绑定

双向数据绑定或许是AngularJS中最强大的功能,借助它我们可以将一个私有作用域中的属性同DOM中的属性值进行绑定。在前面一章已经有一个很好的例子,展示了ng-model如何在外部世界同自定义的指令之间进行双向数据绑定,这个指令在很多方面都同ng-bind相似。

1 0
原创粉丝点击