angularjs directive 指令 学习笔记之scope作用域(二)

Oranq 2017-03-22

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

相关推荐