Directive指令的scope配置项使用说明
常见三种:
1.false-----完全继承父级,子父同步
2.true------继承父级,同时创建自己的作用域,父级改变,自己改变,但自己改变父级不变
3.{}--------创建自己的作用域,和父级完全隔离,与父级毫无关系
♣隔离条件下着重介绍的三个子父之间传值关系
1.@父传子,子不能传父--------》字符串,有{{}}
2.=父子相传,作用域相通------》变量,无{{}}
3.&子传父,子变化时,父有函数对应执行,父级监听子级-------》directive里绑定的是函数,函数的返回值绑定父级中的值或者函数
以上@,=这两种方式要注意第一种是字符串,而第二种是变量,从双花括号{{}}的使用可以区别开来。&用于绑定父级的值或者函数进而通过父级的含函数监听子级的变化
事例
<div ng-app="myapp" ng-controller="mycontrol">
<div>{{name}}<input type="text" ng-model="name"/></div>
<myelement myname="{{name}}"></myelement></br>
<myelem twoname="name"></myelem></br>
<myele threename="name"></myele></br>
<myel fourname="box()"></myel>
</div>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('mycontrol', function($scope) {
$scope.name="hello world!";
$scope.box=function(){
alert("子级调用父级函数")
}
}).directive("myelement",function(){
return{
restrict:"EA",
template:"<input type='text' ng-model='myname'>",
scope:{
myname:"@"
}
}
}).directive("myelem",function(){
return{
restrict:"EA",
template:"<input type='text' ng-model='twoname'/>",
scope:{
twoname:"="
}
}
}).directive("myele",function(){
return{
restrict:"EA",
template:"<div>{{threename()}}</div>",
//template:"<input type='text' ng-model='threename()'/>",这样不能成功,如果是这样就类似于@
scope:{
threename:"&"
}
}
}).directive("myel",function(){
//子级调用父级函数
return{
restrict:"EA",
template:"<div ng-click='fourname()'>点击</div>",
scope:{
fourname:"&"
}
}
})
</script>

浙公网安备 33010602011771号