angularJS学习之路（二十九）---控制器的别名使用 和它的作用域的确定

2019-07-08 16:44:37 浏览数 (1)
代码语言：javascript复制
<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		
		<div ng-controller="RoomController as room">
			<div class="btn-default" ng-click="room.openDoor()">
				Open
			</div>
		</div>
		
		<script type="text/javascript" src="../js/angular.min.js" ></script>
		<script>
			var app = angular.module('myApp',[]);
			app.controller("RoomController",function () {
				this.openDoor = function () {
					alert("open the door !");
				}
			});
		</script>
	</body>
</html>
代码语言：javascript复制
</pre><p></p><p>这其中使用了一行代码：<div ng-controller="RoomController as room"></p><p></p><p>同时在控制器中使用了 this  来定义一个函数  才可以使用别名   下面是对比代码：</p><p></p><p></p><pre name="code" class="html"><!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>

	<body>

		<div ng-controller="RoomController as room">
			<div class="btn-default" ng-click="room.openDoor()">
				Open
			</div>
		</div>

		<div ng-controller="OtherController">
			<div class="btn-default" ng-click="openOtherDoor()">
				Open
			</div>
		</div>

		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script>
			var app = angular.module('myApp', []);
			app.controller("RoomController", function() {
				this.openDoor = function() {
					alert("open the door !");
				}
			});
			app.controller("OtherController", function($scope) {
				$scope.openOtherDoor = function() {
					alert("open the other door !");
				};
			});
		</script>
	</body>

</html>

作用域的关系：

代码语言：javascript复制
<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>

	<body>

		<div ng-controller="RoomController as room">
			<div class="btn-default" ng-click="room.openDoor()">
				{{room.buttonTitle}}
				<div ng-controller="OtherRoomController as other">
					{{room.foo}}
					<br />
					{{other.foo}}
				</div>
			</div>
		</div>

		<div ng-controller="OtherController">
			<div class="btn-default" ng-click="openOtherDoor()">
				Open
			</div>
		</div>

		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script>
			var app = angular.module('myApp', []);
			app.controller("RoomController", function() {
				this.openDoor = function() {
					alert("open the door !");
				};
				this.buttonTitle = "I am a button";
				this.foo = "I am foo of RoomController";
			});
			app.controller("OtherRoomController", function() {
				this.openDoor = function() {
					alert("open the other door !");
				};
				this.buttonTitle = "I am a button";
				this.foo = "I am foo of OtherRoomController";
			});			
			app.controller("OtherController", function($scope) {
				$scope.openOtherDoor = function() {
					alert("open the other door !");
				};
			});
		</script>
	</body>

</html>
作用域

0 人点赞