总的来说用法 分三种:
》1: scope: false --> 继承父域,实现 双向数据绑定
示例代码 可自测:
directive属性 scope:{}scope:false --> 继承父域,实现 双向数据绑定
姓名:年龄:性别:
var myApp = angular.module('myApp', []);//mainCtrl
myApp.controller('mainCtrl', mainController);//myDirective
myApp.directive('myDirective', myDirective )//main controller
functionmainController($scope){
$scope.myName= 'jcy';
$scope.myAge= '22';
$scope.mySex= 'male';
$scope.info= '想知道我的个人信息吗,不告诉你。。。';
$scope.say= function(arg){
alert(arg);
}
};//my directive
functionmyDirective(){return{
scope:false, //{} = isolate, true = child, false/undefined = no change
restrict: 'AE', //E = Element, A = Attribute, C = Class, M = Comment
template: '
'我要说话'+
'
'+
'姓名:'+
'年龄:'+
'性别:
'+
'介绍1:
'+
'介绍2:{{info}}'+
'
'+'
link:function($scope, iElm, iAttrs, controller) {
$(iElm).on('click','button',function(e){var words = '注意这个传值方式哦';
$scope.say( { arg:words } );
});
}
};
}
》2: scope: true -->
初始化,继承父域;
子域属性值没有发生改变前,可实现 单向数据绑定(父变 --> 子变);
子域属性值发生改变后,实现子域与发父域隔离(父变 --> 子不变);
示例代码 可自测:
directive属性 scope:{}scope:true -->初始化,继承父域;
子域属性值没有发生改变前,可实现 单向数据绑定(父变-->子变);
子域属性值发生改变后,实现子域与发父域隔离(父变--> 子不变)
姓名:年龄:性别:
var myApp = angular.module('myApp', []);//mainCtrl
myApp.controller('mainCtrl', mainController);//myDirective
myApp.directive('myDirective', myDirective )//main controller
functionmainController($scope){
$scope.myName= 'jcy';
$scope.myAge= '22';
$scope.mySex= 'male';
$scope.info= '想知道我的个人信息吗,不告诉你。。。';
$scope.say= function(arg){
alert(arg.arg);
}
};//my directive
functionmyDirective(){return{
scope:true, //{} = isolate, true = child, false/undefined = no change
restrict: 'AE', //E = Element, A = Attribute, C = Class, M = Comment
template: '
'我要说话'+
'
'+
'姓名:'+
'年龄:'+
'性别:
'+
'介绍1:
'+
'介绍2:{{info}}'+
'
'+'
link:function($scope, iElm, iAttrs, controller) {
$(iElm).on('click','button',function(e){var words = '这是要测试 scope绑定函数,并且给函数传值的方式';
$scope.say( { arg:words } );
});
}
};
}
》3:
scope 的绑定方式:“@”、“=”、“&”
绑定的名称:要全为小写 中间可用 “-” 符号连接, 绑定到到 scope中时,去掉“-”,并将“-”后第一个字符改为大写,驼峰式命名
scope 绑定方式的区别:
“=”:指令中的属性取值为controller中对应$scope上属性的取值,可用于双向数据的绑定.
“@”:
1.指令中的取值为html中的字面量/直接量. 即:attr="xxx"时,"@attr"形式得到的是 “xxx”字符串;
2.绑定 controller中的$scope property. 即:arrt="{{xxx}}",或者其它绑定$scope.property时,“@attr"形式得到的是$scope.property。
可用于单向数据绑定。父(改变)-->子(改变),子(改变)-->父(不改变)。
“&”:指令中的取值为Contoller中对应$scope上的属性,但是这属性必须为一个函数回调。
当为"func:&aa"时,传值方式 $scope.func({ arg1:"xxx", arg2:"xxxx", .... }), html如
示例代码 可自测:
directive属性 scope:{}总结:
scope 的绑定方式:“@”、“=”、“&”
绑定的名称:要全为小写 中间可用 “-” 符号连接, 绑定到到 scope中时,去掉“-”,并将“-”后第一个字符改为大写,驼峰式命名
scope 绑定方式的区别:
“=”:指令中的属性取值为controller中对应$scope上属性的取值,可用于双向数据的绑定.
“@”:1.指令中的取值为html中的字面量/直接量. 即:attr="xxx"时,"@attr"形式得到的是 “xxx”字符串;
2.绑定 controller中的$scope property. 即:arrt="{{xxx}}",或者其它绑定$scope.property时,“@attr"形式得到的是$scope.property。
可用于单向数据绑定。父(改变)-->子(改变),子(改变)-->父(不改变)。
“&”:指令中的取值为Contoller中对应$scope上的属性,但是这属性必须为一个函数回调。
当为"func:&aa"时,传值方式 $scope.func({ arg1:"xxx", arg2:"xxxx", .... }), html如
<div my-directive aa="xxfunction(arg1, arg2,......)"></div>
姓名:
年龄:
性别:
var myApp = angular.module('myApp', []);//mainCtrl
myApp.controller('mainCtrl', mainController);//myDirective
myApp.directive('myDirective', myDirective )//main controller
functionmainController($scope){
$scope.myName= 'jcy';
$scope.myAge= '22';
$scope.mySex= 'male';
$scope.say= function(arg){
alert(arg);
}
};//my directive
functionmyDirective(){return{
scope: {
name:"=",
age:"=thisIsAge",
sex:"@",
say:"&sayWords"},//{} = isolate, true = child, false/undefined = no change
restrict: 'AE', //E = Element, A = Attribute, C = Class, M = Comment
template: '
'我要说话'+
'
'+
'姓名:'+
'年龄:'+
'性别:'+
'
'+'
link:function($scope, iElm, iAttrs, controller) {
$(iElm).on('click','button',function(e){var words = '这是要测试 scope绑定函数,并且给函数传值的方式';
$scope.say( { arg:words } );
});
}
};
}