<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="scope">
<hello></hello>
<div ng-controller="h1">
<input type="text" ng-model="hh"/>
<hello1 attr1="hh"></hello1>
</div>
<hr/>
<div ng-controller="h2">
<hello2 greet="alertH(name)"></hello2>
<hello2 greet="alertH(name)"></hello2>
<hello2 greet="alertH(name)"></hello2>
</div>
</body>
<script src="angular.js"></script>
<script>
var app=angular.module("scope",[]);
app.directive("hello",function(){
return{
restrict:"AE",
scope:{},
template:"<div><input type='text' ng-model='name'/> {{name}}</div>",
replace:true
}
});
app.controller("h1",function($scope){
$scope.hh="哈哈";
});
app.directive("hello1", function(){
return{
restrict:"AE",
scope:{
//attr1:"@"//单向传递字符串
attr1:"="//双向绑定字符串
},
template:"<input type='text' ng-model='attr1'/><div>{{attr1}}</div>"
}
});
//scope & 用法
app.controller("h2",function($scope){
$scope.alertH=function(name){
alert("hello "+name);
}
});
app.directive("hello2", function(){
return{
restrict:"AE",
scope:{
//attr1:"@"//单向传递字符串
//attr1:"="//双向绑定字符串
greet:"&"//可绑定非字符串
},
template:"<input type='text' ng-model='userName'/><br/>"+
"<input type='button' value='get' ng-click='greet({name:userName})'/><br/>"
}
});
</script>
</html>
