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

最新推荐文章于 2020-06-19 15:01:57 发布

wust小吴

最新推荐文章于 2020-06-19 15:01:57 发布

阅读量908

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/u014737138/article/details/50002377

版权

angularjs 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

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>