angularjs directive 指令 学习笔记之scope作用域（二）
scope:当为false时候，儿子继承父亲的值，改变父亲的值，儿子的值也随之变化，反之亦如此。（继承不隔离）
scope:当为true时候，儿子继承父亲的值，改变父亲的值，儿子的值随之变化，但是改变儿子的值，父亲的值不变。（继承隔离）
scope: 创建指令的作用范围，scope在指令中作为属性标签传递。Scope 是创建可以复用指令的必要条件，每个指令（不论是处于嵌套指令的哪一级）都有其唯一的作用域，它不依赖于父scope。scope 对象定义names 和types 变量。上面的例子即创建了3个scope变量。
name: "@" （值传递，单向绑定）： "@"符号表示变量是值传递。指令会检索从父级scope中传递而来字符串中的值。指令可以使用该值但无法修改，是最常用的变量。
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeAt.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威111";
}]);
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'@'
},
template:"<div>{{flavor}}</div>"
,
link:function(scope,element,attrs){
//scope.flavor=attrs.flavor;
console.log(scope.flavor);
}
}
});amount: "=" （引用,双向绑定）: "="符号表示变量是引用传递。指令检索主Scope中的引用取值。值可以是任意类型的，包括复合对象和数组。指令可以更改父级Scope中的值，所以当指令需要修改父级Scope中的值时我们就需要使用这种类型。
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"> </head> <body> <div ng-controller="MyCtrl"> Ctrl: <br> <input type="text" ng-model="ctrlFlavor"> <br> Directive: <br> <drink flavor="ctrlFlavor"></drink> </div> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="ScopeEqual.js"></script> </html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'='
},
template:'<input type="text" ng-model="flavor"/>'
}
});save: "&" (表达式) : “&”符号表示变量是在父级Scope中启作用的表达式。它允许指令实现比修改值更高级的操作。(只要是方法调用，就只能用&符号修饰)
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"> </head> <body> <div ng-controller="MyCtrl"> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> </div> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="ScopeAnd.js"></script> </html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});备注：只有当指令内部的方法 与 使用指令的控件属性名字一致的时候，才能直接使用"&"符号，而不需要说明属性。
案例二 : 监听ng-repeat满足条件触发自定义函数 和 事件
angular.module("klwkOmsApp").directive("repeatFinishedDirective", function($timeout){
return {
restrict: 'A',
scope:{
condition:"@",
myaction:"&repeataction",
"repeatIndex":"@"
},
controller:function($scope){
},
link: function(scope, element, attr) {
// 查询条件是真，则触发该事件
if (attr.condition == "true") {
$timeout(function() {
// 触发事件
scope.$emit('conditionCallback');
// 处理自定义的方法
scope.myaction();
});
}
}
}
});使用指令：
<ul >
<li ng-repeat="item in list" repeat-finished-directive repeataction="initFunc()" repeatIndex="{{$index}}" condition="{{item == 'liumei' || $last == true}}">
{{$index}} ---- {{item}} ---- {{$last}}----{{$first}}
</li>
</ul>注意以下几点：
1、在指令中scope中的 myaction属性是指令内部的方法，名称是自定义的，可以随便写
2、指令scope对应的值是 "&repeataction"，因为 定义的属性与 scope中的key "myaction" 不一致 .
3、因为html 是不区分大小写的，因此，使用repeataction 属性应该全部小写，如果使用了“驼峰命名”，例如：repeatAction="initFunc()"，则在指令内部依然是 scope : { myaction:"&repeataction" }