三种绑定符的含义:
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>