《AngularJS》——scope的三种绑定策略

来源：互联网发布：网络出版之我见编辑：程序博客网时间：2024/06/05 22:39

三种绑定符的含义:

scope:{}使当前指令作用域与外界隔离开来，使其模板(template)处于non-inheriting(无继承)的状态

@的含义:把当前作用域属性当字符串传递，绑定外层scope的值，在自定义指令中的属性值中插入{{}}即可;
=的含义:与父scope进行双向绑定;
&的含义:传递一个来自父scope的函数(即对父级作用域进行绑定，并将其中的属性(可以是任何属性)包装成一个函数)，稍后调用;

前两种绑定的HTML

<dl>    <dt>独立scope的绑定策略</dt>    <dd>scope的@绑定策略</dd>    <dd>scope的=绑定策略</dd>    <dd>scope的&绑定策略</dd>    <dd>使替换自定义指令的oinput得到文本中input的值</dd></dl><input type="text" ng-model="name"><!--@的写法是表达式的形式--><!--<demo atr="{{name}}"></demo>--><!--=的写法是对象的形式--><demo atr="name"></demo>

第一种@的绑定策略

 var demo=angular.module('app',[]);    demo.controller('ctrl',function ($scope) {        $scope.name='我是文本中input的值';    });    demo.directive('demo',function () {        return{            //现在我想把name1的值和name的值相等            scope:{                //@的作用就是把外层atr的值(dom属性)赋值给name1传递,('我是文本中input的值')               name1:'@atr'            },            restrict:'AE',            template:'<input type="text" ng-model="name1"/>'        }    });

第二种=的绑定策略

 var demo=angular.module('app',[]);    demo.controller('ctrl',function ($scope) {        $scope.name='我是文本中input的值';    });    demo.directive('demo',function () {        return{            //现在我想把name1的值和name的值相等            scope:{                //=的作用就是把外层atr的值(其实就是name的值)与name1进项双向绑定                name1:'=atr'            },            restrict:'AE',            template:'<input type="text" ng-model="name1"/>'        }    });

第三种&的绑定策略

<!doctype html><html ng-app="MyModule"><head>    <meta charset="utf-8">    <script src="../../../angular.1.4.8.min.js"></script></head><body><div ng-controller="MyCtrl">    <!--自定义指令的sayName方法-->   <hello method="sayName(name)"></hello></div><script>    var myModule = angular.module('MyModule', []);    myModule.controller('MyCtrl', function ($scope) {        $scope.sayName = function (name) {            alert("弹出输入的内容"+name);        };    });    myModule.directive('hello', function () {        return {            restrict: 'AE',            scope: {                method:'&'//得到了父scope的sayName()方法            },//  写template是注意要有一个外部容器进行包括,把input上的数据绑定到method方法上            template: '<div><input type="text" ng-model="userName"/>'+"<button ng-click='method({name:userName})'>say name</button></div>",            replace:true        };    });</script></body></html>

阅读全文

0 0