1、index.html:
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>scopeAt</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular.js"></script>
</head>
<body>
<!-- 下面是指令scope作用域@符demo. -->
<div ng-controller="myCtrl">
<drink flavor={{ctrlFlavor}}></drink>
</div>
<script src="./scopeAt.js"></script>
</body>
</html>
2、scopeAt.js:
var myModule = angular.module("app",[]);
myModule.controller('myCtrl', ['$scope', function($scope){
$scope.ctrlFlavor = "aaaaaaaaaaaaaaa";
}]);
myModule.directive('drink',function(){
return {
restrict: 'AE',
scope:{
fla:'@flavor'//独立作用域中表达式跟属性之间的交互传值,效果等同下面的link:方法——将属性attrs.flavor的值赋给scope.fla作用域中表达式变量fla中,而属性值来自于控制器赋值
},
template: '<div>{{fla}}</div>',
// link: function(scope, elm, attrs) {
// scope.fla = attrs.flavor;//意为将属性flavor的值赋给模板div中的表达式{{fla}}中
// }
}
});