首先看代码:
html:
<!doctype html>
<html ng-app="app">
<head>
</head>
<body>
<div ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
<script src="angular.min.js"></script>
<script src="js/bb.js"></script>
</body>
</html>
bb.js
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope){
$scope.ctrlFlavor = "aaaaaa";
})
app.directive("drink", function(){
return {
restrict: "AE",
template: "<div>{{cc}}</div>",
link: function(scope, element, attrs) {
scope.cc = attrs.flavor;
}
}
});
按照上面的写法,输出的是aaaaaa
首先定义了controller中的变量ctrlFlavor,然后赋值给html中drink指令的flavor属性。drink指令中,又定义了模板,模板中包含了一个变量cc,在link中将html中flavor属性
的值(即controller的值aaaaaa)赋值给template的cc完成数据交互。
angular对上面的写法提供了一个简便的写法,如下:
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope){
$scope.ctrlFlavor = "aaaaaa";
})
app.directive("drink", function(){
return {
scope: {
flavor: '@flavor'
},
restrict: "AE",
template: "<div>{{flavor}}</div>",
link: function(scope, element, attrs) {
}
}
});
首先,scope中的@flavor匹配html中的flavor的值,然后将值传入到scope的flavor中,再匹配template的flavor,完成值的传递。
注意,这里@flavor可以写成@aa,html中drink内也要写成aa="",只要和html中的属性匹配上就好。如果只写一个@符号,则html中必须写成flavor="",和scope中的名字一致。