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一样。

Angularjs数据绑定 Angularjs组件数据绑定 Angularjs

https://blog.xqlee.com/article/2507011041272118.html