总的来说用法 分三种:
》1: scope: false --> 继承父域,实现 双向数据绑定
示例代码 可自测:
directive属性 scope:{} scope:false --> 继承父域,实现 双向数据绑定
姓名: 年龄: 性别:
》2: scope: true -->
初始化,继承父域;
子域属性值没有发生改变前,可实现 单向数据绑定(父变 --> 子变);
子域属性值发生改变后,实现子域与发父域隔离(父变 --> 子不变);
示例代码 可自测:
directive属性 scope:{} scope:true --> 初始化,继承父域; 子域属性值没有发生改变前,可实现 单向数据绑定(父变 --> 子变); 子域属性值发生改变后,实现子域与发父域隔离(父变 --> 子不变)
姓名: 年龄: 性别:
》3:
scope 的绑定方式:“@”、“=”、“&”
绑定的名称:要全为小写 中间可用 “-” 符号连接, 绑定到到 scope中时,去掉“-”,并将“-”后第一个字符改为大写,驼峰式命名
scope 绑定方式的区别:
“=”:指令中的属性取值为controller中对应$scope上属性的取值,可用于双向数据的绑定.
“@”:
1.指令中的取值为html中的字面量/直接量. 即:attr="xxx"时,"@attr"形式得到的是 “xxx”字符串;
2.绑定 controller中的$scope property. 即:arrt="{ {xxx}}",或者其它绑定$scope.property时,“@attr"形式得到的是$scope.property。
可用于单向数据绑定。父(改变)-->子(改变),子(改变)-->父(不改变)。
“&”:指令中的取值为Contoller中对应$scope上的属性,但是这属性必须为一个函数回调。
当为"func:&aa"时,传值方式 $scope.func({ arg1:"xxx", arg2:"xxxx", .... }), html如 <div my-directive aa="xxfunction(arg1, arg2,......)"></div>
示例代码 可自测:
directive属性 scope:{} 总结:
scope 的绑定方式:“@”、“=”、“&” 绑定的名称:要全为小写 中间可用 “-” 符号连接, 绑定到到 scope中时,去掉“-”,并将“-”后第一个字符改为大写,驼峰式命名 scope 绑定方式的区别: “=”:指令中的属性取值为controller中对应$scope上属性的取值,可用于双向数据的绑定. “@”: 1.指令中的取值为html中的字面量/直接量. 即:attr="xxx"时,"@attr"形式得到的是 “xxx”字符串; 2.绑定 controller中的$scope property. 即:arrt="{ {xxx}}",或者其它绑定$scope.property时,“@attr"形式得到的是$scope.property。 可用于单向数据绑定。父(改变)-->子(改变),子(改变)-->父(不改变)。 “&”:指令中的取值为Contoller中对应$scope上的属性,但是这属性必须为一个函数回调。 当为"func:&aa"时,传值方式 $scope.func({ arg1:"xxx", arg2:"xxxx", .... }), html如<div my-directive aa="xxfunction(arg1, arg2,......)"></div>姓名: 年龄: 性别: