AngularJS指令之绑定策略“@”，“=”，“&”

学习到绑定策略这一块的时候始终很迷糊，不清楚这三个绑定策略到底如何使用，写了好多demo，终于弄明白了。

首先介绍一下指令参数scope

scope参数可以设置三种值：

  • false  (默认值)，继承父作用域，与父作用域共享model，父改，子改；子改，父改。
  • true    继承父作用域并创建一个新的作用域，
              用父作用域属性和方法来初始化自己的属性和方法，所以初始创建后父改子亦改，但是如果子再修改了，父不会改；而且父再改子也不会改。
  • {}       隔离作用域，不继承父作用域，与外界隔离的作用域。父改子不改；子改父不改。

一、

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <script src="Scripts/angular.js"></script>
 7     <script>
 8         var myApp = angular.module('myApp', []);
 9         myApp.controller('myCtrl', ['$scope', function (scope) {
10             scope.name = 'Tom';
11         }]);
12         myApp.directive('myDire', function () {
13             return {
14                 restrict: 'EA',
15                 replace: false,
16                 template: "<div>\
17                            <span  style='color:red'>子：{{name}}</span><br />\
18                            修改子：<input type='text' ng-model='name'/>\
19                            </div >",
20                 scope: false//默认值
21             }
22         })
23     </script>
24 </head>
25 <body ng-controller="myCtrl">
26     父:{{name}}<br />
27     修改父：<input type="text" ng-model="name" />
28     <div my-Dire myAttr></div>
29 </body>
30 </html>
View Code

 运行结果：

 

二、修改 scope:true

运行结果：

 

 三、修改 scope:{}

运行结果：

 

 

 另外，在AngularJS中提供了三种（@，=，&）绑定策略，使隔离作用域与指令外部作用域进行数据绑定。

'@'（or '@attrName'）：将隔离作用域与DOM属性绑定，实现复制父作用域的属性值。父改子改，子改父不改。相当于值复制

'='（or '=attrName'）：进行双向数据绑定，父改子改；子改父改。相当于引用复制

'&'（or  '&attrName'）：与父作用域function绑定。

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <script src="Scripts/angular.js"></script>
 7     <script>
 8         var myApp = angular.module('myApp', []);
 9         myApp.controller('myCtrl', ['$scope', function (scope) {
10             scope.name = 'Tom';
11             scope.age = 23;
12             scope.dialog = function () {
13                 alert("我的名字：" + scope.name + ",年龄：" + scope.age);
14             }
15         }]);
16         myApp.directive('myDire', function () {
17             return {
18                 restrict: 'EA',
19                 replace: false,
20                 template: "<div>\
21                                子name：<input type='text' ng-model='name'/><br /><br />\
22                                子age：&nbsp;&nbsp;&nbsp;<input type='text' ng-model='age'/><br /><br />\
23                                子button：<input type='button' value='click me' ng-click='dialog()'/>\
24                                </div >",
25                 scope: {
26                     name: '@myName',//值复制
27                     age: '=myAge',//双向数据绑定
28                     dialog: '&myClick'//与父作用域function绑定
29                 }
30             }
31         })
32     </script>
33 </head>
34 <body ng-controller="myCtrl">
35     父name：<input type="text" ng-model="name" /><br /><br />
36     父age：&nbsp;&nbsp;&nbsp;<input type="text" ng-model="age" /><br /><br />
37     <div my-Dire my-name="{{name}}" my-age="age" my-click="dialog()"></div>
38 </body>
39 </html>
View Code

运行结果：

 

posted @ 2020-04-14 11:16  再努力一点点点  阅读(172)  评论(0)    收藏  举报