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" }

angularjs directive 指令 学习笔记之scope作用域（二）

相关推荐

angularjs directive 指令学习笔记之scope作用域（二）