angularJS学习之路(十九)---自定义指令关于独立作用域

1.首先关于  scope:{} 和scope:true 效果是一样的

<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

		<div ng-init="myProperty = 'wow, this is cool'"></div>
		Surrounding scope: {{ myProperty }}
		<div myInheritScopeDirective="SomeCtrl">
			Inside an directive with inherited scope: {{ myProperty }}
		</div>
		<div myDirective>
			Inside myDirective, isolate scope: {{ myProperty }}
		</div>
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script>
			var app = angular.module('myApp', []);
			app.directive('myDirective', function() {
				return {
					restrict: 'A',
					scope: {}
				};
			});
			app.directive('myInheritScopeDirective', function() {
				return {
					restrict: 'A',
					scope: true
				};
			});
		</script>
	</body>

</html>

2.关于不设置scope:true的时候非独立作用域的效果

<!doctype html>
<html ng-app="myApp">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>

	<body>

		<div>
			<xingoo></xingoo>
			<xingoo></xingoo>
			<xingoo></xingoo>
		</div>

		<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
		<script type="text/javascript">
			var myAppModule = angular.module("myApp", []);
			myAppModule.directive("xingoo", function() {
				return {
					restrict: 'AE',
					template: '<div><input type="text" ng-model="username"/>{{username}}</div><br>',
					repalce: true
				}
			})
		</script>
	</body>

</html>

3.关于设置 scope:{} 独立作用域的效果

<!doctype html>
<html ng-app="myApp">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>

	<body>

		<div>
			<xingoo></xingoo>
			<xingoo></xingoo>
			<xingoo></xingoo>
		</div>

		<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
		<script type="text/javascript">
			var myAppModule = angular.module("myApp", []);
			myAppModule.directive("xingoo", function() {
				return {
					restrict: 'AE',
					scope: {},
					template: '<div><input type="text" ng-model="username"/>{{username}}</div><br>',
					repalce: true
				}
			})
		</script>
	</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励