| 标识 | 描述 |
|---|---|
| @ | 把当前属性作为字符串传递，你还可以绑定来自外层的socpe值，在属性值中插入{{}}即可。 |
| = | 与父scope中的属性双向绑定 |
| & | 传递一个来自父scope的函数，稍后调用 |
@绑定
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
</html>
<script>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
template:"<div>{{flavor}}</div>",
link:function(scope,element,attrs){
scope.flavor=attrs.flavor;
}
}
});
</scribe>
结果：
百威
我们来梳理一下步骤：
- html引用了一个指令
drink，指令中通过flavor属性绑定了控制器的ctrlFlavor，所以，指令属性已经拿到了控制器中ctrlFlavor的值：百威。 - js中的drink指令，template模板中，是获取
{{flavor}} - link中的
attrs绑定了html页面中的flavor属性，拿到了第一步获取到的“百威”，然后在通过scope，将值赋给模板中的flavor，则页面显示百威。
而使用@,可以简化上面的步骤:
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'@'
},
template:"<div>{{flavor}}</div>"
// ,
// link:function(scope,element,attrs){
// scope.flavor=attrs.flavor;
// }
}
});
这样，Angularjs就会自动帮我们进行绑定了。
注意：@绑定，传递的是字符串
=绑定
双向绑定，我们希望把指令里的指令，和控制器中的进行双向绑定，只需要设置成=号即可，我们来看个例子。
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
Ctrl:
<br>
<input type="text" ng-model="ctrlFlavor">
<br>
Directive:
<br>
<drink flavor="ctrlFlavor"></drink>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
</html>
<script>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'='
},
template:'<input type="text" ng-model="flavor"/>'
}
});
</script>
这样，2个input输入的内容，都会发生变化，比较简单，就不细说了。
& 函数绑定
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
</html>
<script>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});
</script>
步骤解释：
- 首先html，有3个相同的指令
greeting，有个属性greet，绑定了控制器sayHello这个方法。 - 指令中，模块有一个input和一个button，button中的greet绑定成了sayHello
- sayHello中有个参数
name,通过name:userName与input进行绑定
这种就属于函数传递了。
总结
@: 已字符串的形式进行传递的。=: 双向绑定的&: 用来传递函数的，调用父层的
