angularjs封装组件的数据绑定

本文介绍了AngularJS中封装组件时的数据绑定,包括@(单向引用)、=(双向绑定)和&(调用父域函数)策略。通过示例详细解析了如何使用这些绑定策略在组件内外部作用域间实现数据和函数的交互。

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

angularjs封装组件的数据绑定

简介
在封装组件的时候,我们会进行数据的传输和绑定,有的是单向的,有的是双向的,有的时候会调用外部作用域的函数等,这时候我们会进行外部作用域与组件内部作用域的数据绑定,也就是组件中 “bindings”属性的作用。本文对“bindings”中的参数进行说明,达到数据与函数的绑定。

举例:
我们封装一个名字叫“Child”的组件,代码如下:

js代码:

child.js

shtermApp.component("child", {
    templateUrl: ".../child.html",
    bindings : {
        "myAge" : "@?",
        "myName" : "=",
        "say" : "&?"
    },
    controller: function($scope) {
        ...
    }
 
});

html代码:

<qz-child my-age="{{age}}" my-name="name" say="say(param)" ></qz-child>
@ 字符值 - input
< 单向绑定 - input
& 回调传递 - 父组件的方法,用于向上的交互 - output
= 双向绑定 - 设计原则中不推荐使用

说明:
1.@(or@Attr)绑定策略——本地作用域属性,使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量。(单向引用父域对象)。注:@ 是单向绑定本地作用域,记得加上{{}}。用法:。(与“<”用法一样,即单向绑定,“@”用于传字符值,“<”用于传对象)

2.=(or=Attr)绑定策略——双向绑定:通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变。=不需要加上{{}}进行绑定。(双向引用父域对象)。用法:

3.& (or &Attr)绑定策略——通过&符号可以对父级作用域进行绑定,以便在其中运行函数。(调用父域函数).用法:

4.当参数中属性加上”?“时,代表此参数可选。Attr代表页面中的引用属性的名字,可与组件中原始参数的名字不一样。如:组件参数写成:“myName” : “=name”,页面中是使用方法为:,页面中参数名字与Attr一样。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值