angularJS学习之路（二十九）---控制器的别名使用 和它的作用域的确定
angularJS学习之路（二十九）---控制器的别名使用 和它的作用域的确定
wust小吴
发布于 2019-07-08 16:44:37
发布于 2019-07-08 16:44:37
<!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></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>作用域的关系：
<!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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015年11月24日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读