学习要点:
- 为什么使用控制器
- 基本原理
- 创建使用控制器
- 作用域
- 组织控制器
- 单块控制器
- 复用控制器
- 控制器继承
- 多控制器
- 无作用域控制器
- 显示更新控制器–使用JQuery UI
为什么使用控制器?
控制器就像领域模型和视图的纽带,它从模型中暴露数据给视图,它给视图提供数据与服务,并且定义了所需的业务逻辑,从而将用户行为转换为模型上的变化。
一、理解基本原理
控制器是通过NG的Module.controller
来创建的,它接受一个控制器名称和一个工厂函数,这个工厂函数内部有一个$scope
服务,用于向视图提供作用域,我们也正是通过修改$scope
来修改控制器的作用的
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angular Directive</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<!-- 使用控制器 -->
<body ng-controller="defaultCtrl">
<div class="well">
<!-- 下拉列表每次选择都会更替city值 -->
<select ng-options="city for city in cities" ng-model="city"></select>
</div>
<div class="well" >
<p>The City is: {{city}}</p>
<!-- 调用getCountry()方法 -->
<p>The country is: {{getCountry(city) || "Unkonwn"}}</p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
// define a controller named defaultCtrl
.controller(‘defaultCtrl‘, function ($scope) {
// 数据模型集合
$scope.cities = ["London", "New York", "Paris"];
// 显示的模型
$scope.city = "London";
// 通过city显示国家
$scope.getCountry = function (city) {
switch (city) {
case ‘London‘:
return "UK";
case ‘New York‘:
return "USA";
}
}
})
</script>
</body>
</html>
第一步:利用Module.controller方法创建了控制器,接着在视图中使用控制器ng-controller
第二步:利用$scope服务设置控制器的作用域,向视图暴露数据
第三步:在视图中双向数据绑定ng-model
数据city
,通过选择下拉菜单修改$scope.city
的值,从而达到修改作用域的目的。
二、组织控制器
1.单块控制器,简单点,就是整个视图只是使用一个控制器
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angular Directive</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<style>
</style>
</head>
<body>
<!-- 第一次使用 -->
<div class="well" ng-controller="defaultCtrl">
<h4>Billing Zip Code</h4>
<div class="form-group">
<input class="form-control" ng-model="billingZip">
</div>
<button class="btn btn-primary" ng-click="setAddress(‘billingZip‘, billingZip)">Save Billing</button>
</div>
<!-- 第二次使用,但是两个作用域不能互通 -->
<div class="well" ng-controller="defaultCtrl">
<h4>shipping Zip Code</h4>
<div class="form-group">
<input class="form-control" ng-model="zip">
</div>
<button class="btn btn-primary" ng-click="copyAddress()">Copy Billing</button>
<button class="btn btn-primary" ng-click="setAddress(‘shippingZip‘, zip)">Save Shipping</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
// define a controller named defaultCtrl
.controller(‘defaultCtrl‘, function ($scope) {
$scope.address = {};
$scope.setAddress = function (type, zip) {
console.log("Type: " + type + " " + zip);
$scope.address[type] = zip;
}
$scope.copyAddress = function () {
// 这里两个数据不能够通讯,因为他们来自不同的作用域,虽然他们使用同一个控制器
$scope.shippingZip = $scope.billingZip;
}
})
</script>
</body>
</html>
控制器在视图中使用的两次,相应的他们虽然数据模型相同但是作用域不同,展示不可用进行通讯
接下来,我们要跨作用域实现通信
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angular Directive</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<style>
</style>
</head>
<body>
<!-- 第一次使用 -->
<div class="well" ng-controller="defaultCtrl">
<h4>Billing Zip Code</h4>
<div class="form-group">
<input class="form-control" ng-model="billingZip">
</div>
<button class="btn btn-primary" ng-click="setAddress(‘billingZip‘, billingZip)">Save Billing</button>
</div>
<!-- 第二次使用,但是两个作用域不能互通 -->
<div class="well" ng-controller="defaultCtrl">
<h4>shipping Zip Code</h4>
<div class="form-group">
<input class="form-control" ng-model="zip">
</div>
<button class="btn btn-primary" ng-click="copyAddress()">Copy Billing</button>
<button class="btn btn-primary" ng-click="setAddress(‘shippingZip‘, zip)">Save Shipping</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
// define a controller named defaultCtrl
.controller(‘defaultCtrl‘, function ($scope, $rootScope) {
$scope.$on("zipCodeUpdated", function (event, args) {
$scope[args.type] = args.zipCode;
console.log($scope[args.type] + ", " + args.zipCode);
})
$scope.setAddress = function (type, zip) {
// 向下传播zipCodeUpdated事件
$rootScope.$broadcast("zipCodeUpdated", {
type : type,
zipCode : zip
})
console.log("Type: " + type + " " + zip);
}
// 把billingZip赋值给zip
$scope.copyAddress = function () {
$scope.zip = $scope.billingZip;
console.log($scope.zip);
}
})
</script>
</body>
</html>
原理解析:
第一步:当Save Billing按钮被点击后,会触发setAddress(‘billingZip’, billingZip)方法,传递的值为billingZip和billingZip输入框的值(这里假设为zhang),即type : ‘billingZip’, zip : ‘zhang’
第二步:接着,$rootScope就向下级作用域发送了一个名为zipCodeUpdated的事件,且携带一个对象参数,即type : ‘billingZip’, zipCode : ‘zhang’
这时其他的局部视图就拥有了zipCodeUpdated事件的对象值
第三步:这时你再点击Copy Billing按钮,它会触发copyAddress方法,且把billingZip值赋给zip之后zip被双向绑定值了,我们可以看出来
第四步:最后点击Save Shipping按钮,就可以再次触发setAddress(‘shippingZip’, zip)事件,且传递了新的type和zip值
同时,我们还可以使用服务来调节作用域事件
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angular Directive</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<style>
</style>
</head>
<body>
<div class="well" ng-controller="defaultCtrl">
<h4>Billing Zip Code</h4>
<div class="form-group">
<input class="form-control" ng-model="billingZip">
</div>
<button class="btn btn-primary" ng-click="setAddress(‘billingZip‘, billingZip)">Save Billing</button>
</div>
<div class="well" ng-controller="defaultCtrl">
<h4>shipping Zip Code</h4>
<div class="form-group">
<input class="form-control" ng-model="zip">
</div>
<button class="btn btn-primary" ng-click="copyAddress()">Copy Billing</button>
<button class="btn btn-primary" ng-click="setAddress(‘shippingZip‘, zip)">Save Shipping</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
.service("ZipCodes", function ($rootScope) {
return {
setZipCode : function (type, zip) {
this[type] = type;
$rootScope.$broadcast("zipCodeUpdated", {
type : type,
zipCode : zip
})
}
}
})
// define a controller named defaultCtrl
.controller(‘defaultCtrl‘, function ($scope, $rootScope) {
// 原理解析:
// 第一步:单击Save Billing按钮,触发setAddress,携带参数shippingZip和zhang(这里假设用户输入的为zhang)
// 第二步:在setAddress方法内部调用了ZipCodes服务返回的setZipCode方法,携带参数type=shippingZip 和 zip=zhang
// 第三步:setZipCode方法中依赖注入了$rootScope顶层作用域,且该顶层作用域向下面的每个视图作用域发送了一个zipCodeUpdated事件,且携带参数type=shippingZip 和 zipCode=zhang
// 第四步:zipCodeUpdated事件处理函数将接受的数据,重新依赖注入到$scope中,
// 这里,即为$scope[args.type(billingZip)] = $scope.billingZip = args.zipCode(zhang) = zhang
// 即,$scope.billingZip = zhang
// 第五步:单击Copy Billing按钮,触发copyAddress事件,就可以将$scope.billingZip赋值给$scope.zip,且zip进行了双向数据绑定
// 第六步:单击Save Shipping按钮,触发setAddress事件,携带‘shippingZip‘和zip,也就是可以完成复制功能了
$scope.$on("zipCodeUpdated", function (event, args) {
$scope[args.type] = args.zipCode;
console.log($scope[args.type] + ", " + args.zipCode);
})
$scope.setAddress = function (type, zip) {
ZipCodes.setZipCode(type, zip);
console.log("Type: " + type + " " + zip);
}
// 把billingZip赋值给zip
$scope.copyAddress = function () {
$scope.zip = $scope.billingZip;
}
})
</script>
</body>
</html>
3.使用控制器继承,类似于类的继承
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angular Directive</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<style>
</style>
</head>
<body ng-controller="topCtrl">
<div class="well">
<h4>Top Level Controller</h4>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="reverseText()">Reverse</button>
<button class="btn btn-default" type="button" ng-click="changeCase()">Case</button>
</span>
<input class="form-control" ng-model="data.dataValue">
</div>
</div>
<div class="well" ng-controller="firstChildCtrl">
<h4>First Child Controller</h4>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="reverseText()">Reverse</button>
<button class="btn btn-default" type="button" ng-click="changeCase()">Case</button>
</span>
<input class="form-control" ng-model="data.dataValue">
</div>
</div>
<div class="well" ng-controller="secondChildCtrl">
<h4>Second Child Controller</h4>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="reverseText()">Reverse</button>
<button class="btn btn-default" type="button" ng-click="changeCase()">Case</button>
<button class="btn btn-default" type="button" ng-click="shift()">Shift</button>
</span>
<input class="form-control" ng-model="data.dataValue">
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
var app = angular.module("exampleApp", [])
// 定义父类控制器
app.controller(‘topCtrl‘, function ($scope) {
$scope.data = {
dataValue : "Zhang San Is My Best Friend"
}
// PS : 在对象中定义变量,利用数据共享
// 理解数据继承---NG对作用域上的数据值的继承处理方式,以及如何受ng-model影响的
// 读取属性值:当前作用域->父级作用域...->顶级作用域
// ng-model指令修改属性值:当前作用域,如果没有,隐藏该属性
// 反转字体顺序
$scope.reverseText = function () {
$scope.data.dataValue = $scope.data.dataValue.split(" ").reverse().join(" ");
}
// 调整单词大小写---第2n个单词大写
$scope.changeCase = function () {
var result = [];
angular.forEach($scope.data.dataValue.split(" "), function (char, index) {
// console.log(char + ", " + index);
result.push(index % 2 == 1 ? char.toString().toUpperCase() : char.toString().toLowerCase());
});
$scope.data.dataValue = result.join(" ");
}
});
// 第一个子类控制器
app.controller(‘firstChildCtrl‘, function ($scope) {
// 重写
$scope.changeCase = function () {
$scope.data.dataValue = $scope.data.dataValue.toUpperCase();
};
});
// 第二个子类控制器
app.controller(‘secondChildCtrl‘, function ($scope) {
$scope.changeCase = function () {
$scope.data.dataValue = $scope.data.dataValue.toLowerCase();
};
// 前四个单词大写---拓展
$scope.shift = function () {
var result = [];
angular.forEach($scope.data.dataValue.split(" "), function (char, index) {
result.push(index < 4 ? char.toUpperCase() : char);
});
$scope.data.dataValue = result.join(" ");
}
});
</script>
</body>
</html>
第一步:先后定义三个控制器父类控制器topCtrl、子类控制器firstChildCtrl和secondChildCtrl。
父类中定义了反转字体顺序reverseText()方法和调整单词大小写changeCase()方法;
子类firstChildCtrl继承了父类的reverseText()方法,并且重写了changeCase()方法;
子类secondChildCtrl继承了父类的reverseText()方法,并且重写了changeCase()方法,扩展了新方法shift()
第二步:目前三个控制器还是互相独立的,我们需要使用控制器继承,只需要在父类视图中,添加子类控制器即可
注意:
NG对作用域上的数据值的继承处理方式,以及如何受ng-model影响的
读取属性值:当前作用域->父级作用域…->顶级作用域
ng-model指令修改属性值:当前作用域,如果没有,隐藏该属性
案例中,我们使用对象中添加属性,利用原型实现了共享
接下来,我们看看效果图
4.使用多个控制器
很简单,前面我们已经使用过了!
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angular Directive</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="well" ng-controller="firstChildCtrl">
<h4>First Child Controller</h4>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="changeCase()">Case</button>
</span>
<input class="form-control" ng-model="dataValue">
</div>
</div>
<div class="well" ng-controller="secondChildCtrl">
<h4>Second Child Controller</h4>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="changeCase()">Case</button>
<button class="btn btn-default" type="button" ng-click="shift()">Shift</button>
</span>
<input class="form-control" ng-model="dataValue">
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
var app = angular.module("exampleApp", [])
// define a controller named defaultCtrl
app.controller(‘firstChildCtrl‘, function ($scope) {
$scope.dataValue = "Zhang San";
// 重写
$scope.changeCase = function () {
$scope.dataValue = $scope.dataValue.toUpperCase();
};
});
app.controller(‘secondChildCtrl‘, function ($scope) {
$scope.dataValue = "Li Si";
$scope.changeCase = function () {
$scope.dataValue = $scope.dataValue.toLowerCase();
};
// 前四个单词大写---拓展
$scope.shift = function () {
var result = [];
angular.forEach($scope.dataValue.split(" "), function (char, index) {
result.push(index < 4 ? char.toUpperCase() : char);
});
$scope.dataValue = result.join(" ");
}
});
</script>
</body>
</html>
5.使用无作用域的控制器
当你的作用域不需要复杂、没错继承的好处的必要、不需要控制器之间的通讯,那么可以使用无作用域的控制器
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angular Directive</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<!-- 需要将指定代表控制器的变量名,这里为top -->
<div class="well" ng-controller="topCtrl as top">
<h4>Top Level Controller</h4>
<div class="input-group">
<span class="input-group-btn">
<!-- 调用时用top.属性和top.方法的形式 -->
<button class="btn btn-default" type="button" ng-click="top.reverseText()">Reverse</button>
</span>
<input class="form-control" ng-model="top.dataValue">
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
var app = angular.module("exampleApp", [])
// define a controller named defaultCtrl
app.controller(‘topCtrl‘, function () {
// 当你的作用域不需要复杂、没错继承的好处的必要、不需要控制器之间的通讯,那么可以使用无作用域的控制器
// 标志为:不要注册依赖,即去除$scope,用this代替
this.dataValue = "Zhang San";
this.reverseText = function () {
this.dataValue = this.dataValue.split(" ").reverse().join(" ");
}
});
</script>
</body>
</html>
6.显示更新作用域
将AngularJS与另外的JS框架集成起来,例如我们将要说到的jQuery UI,我们将实现两个框架作用域的通讯
NG给出了三个方法:
什么意思呢?我们将在案例中详解
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angular Directive</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<div id="ngRegion" class="well" ng-controller="topCtrl">
<h4>AngularJS</h4>
<div class="chexbox">
<label>
<input type="checkbox" ng-model="buttonEnabled"> Enable Button
</label>
</div>
Click Count : {{clickCounter || "0"}}
</div>
<div id="jqui" class="well">
<h4>JQuery UI</h4>
<button class="btn btn-primary">Click me!</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript">
// define a module named exampleApp
var app = angular.module("exampleApp", [])
// define a controller named defaultCtrl
app.controller(‘topCtrl‘, function ($scope) {
$scope.buttonEnabled = true;
$scope.clickCounter = 0;
$scope.handleClick = function () {
$scope.clickCounter ++;
}
// 在NG中通过checkbox来控制JQ UI中的button
// $watch(express, handle)方法注册一个事件处理函数,当express的值发生变化时,handle就会被触发
// 当buttonEnabled的值发生变化时,匿名函数会触发
$scope.$watch(‘buttonEnabled‘, function (newValue) {
$("#jqui button").button({
disabled : !newValue
})
})
// PS: 类似的$watchCollection(object, handle)方法注册一个事件处理函数,当object对象中的任意属性值发生变化,handle就会被触发
});
$(function () {
$("#jqui button").click(function () {
alert("JQuery UI was clicked");
// 同样JQ也可以控制NG中的组件
// 点击JQ中的button按钮,使得ng的$scope.clickCounter递增
// angular.element(ngRegion).scope()获取名为ngRegion的ng的作用域
angular.element(ngRegion).scope().$apply(‘clickCounter = clickCounter + 1‘);
});})
</script>
</body>
</html>
单击NG中的复选框控制JQ中button是否禁用,单击JQ中的button使得NG中的click count递增