angularjs directive scope变化为啥html,angularjs中directive声明scope对象的用法

总的来说用法 分三种：

》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 } );

});

}

};

}