AngularJS控制器详情

前言

为了对AngularJS的控制器了解更深，本次进行详细的测试。

AngularJS控制器基本使用

首先，定义一个控制器：

controller("XXName",function(……){});

然后绑定到HTML元素中去。这样，在该Controller中定义的值和方法，就可以在此HTML元素中使用。
控制器的作用域是$scope，该变量是一个普通的Json对象。里面可以定义属性或者方法。在$scope中定义的变量和方法，只能在该controller中使用。

如果要使用全局的作用域，可以使用$rootScope，但是一般情况，尽量避免使用全局作用域。
Controller的定义方法，可以通过另外一种显式的DI注入：

xxx.controller("xxxName",["$scope","$rootScope",function($scope,$rootScope){……}   ]);

AngularJS控制器复用

Controller可以复用。同一个Controller可以在不同的元素中定义。

但是需要注意的是，每个Controller对应的控制域是不同的。也即$scope是独立的，都是继承于$rootScope。但是各自为政，互不干扰。

AngularJS控制器继承

控制器具有继承关系，默认所有的控制器中的$scope继承于$rootScope。继承的关系是$scope可以使用一切在$rootScope中的属性和方法，反过来就不行。

不过在，子Scope与父scope中，子scope可以覆盖父scope的属性。继承关系如下图：

见下面例子：

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
	<Meta charset="utf-8">
    <title>控制器</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
	<script>
		var app = angular.module("exampleApp",[]);

		app.controller("parentCtrl",function ($scope) {

			$scope.data = "Hello,Kobe";	//初始值

			$scope.reverseText = function () {
				$scope.data = $scope.data.split("").reverse().join("");		//将数据分割反转再放进一个数组中
			}

			$scope.changeCase = function () {
				var result = [];
				angular.forEach($scope.data.split(""),function (char,index) {
					result.push(index % 2 == 1
						? char.toString().toUpperCase() : char.toString().toLowerCase());
				});
				$scope.data = result.join("");		//将奇数字母转小写，偶数字母转大写
			};
		});

		app.controller("firstChildCtrl",function ($scope) {

			$scope.changeCase = function () {
			   $scope.data = $scope.data.toUpperCase();		//将值转为大写
			};
		});

		app.controller("secondChildCtrl",function ($scope) {

			$scope.changeCase = function () {
			   $scope.data = $scope.data.toLowerCase();		//将值转为小写
			};

			$scope.shiftFour = function () {
				var result = [];
				angular.forEach($scope.data.split(""),index) {
					result.push(index < 4 ? char.toUpperCase() : char);
				});
				$scope.data = result.join("");		//将前4字母转为大写，后面的不变
			}
		});
	</script>
</head>
<body ng-controller="parentCtrl">

    <div class="well">
        <h4>Parent 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">
        </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">
        </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="shiftFour()">Shift</button>
            </span>
            <input class="form-control" ng-model="data">
        </div>
    </div>    
</body>
</html>

效果：

AngularJS控制器 as 别名

angular在view上的绑定都必须使用直接的scope对象，对于controller来说我们也得必须注入$scope这个service。 angular从1.2版本开始带来了新语法Controller as。如下：

<!DOCTYPE html>
<html ng-app="exampleApp" >
<head>
	<Meta charset="utf-8"> 
    <title>as别名</title>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module("exampleApp",[]);
        myApp.controller("dayCtrl",function () {
            this.day = new Date();
        });
    </script>

</head>
<body >
    <div class="panel" ng-controller="dayCtrl as dc">
        <div class="page-header">
            <h3>AngularJS as 测试</h3>
        </div>
        <h4>Now is {{dc.day | date:"yyyy-MM-dd HH:mm:ss"}}</h4>
    </div>
</body>
</html>

效果：

其实controller的as语法，只是利用了$scope属性。将as后面的别名作为$scope中的对象。Angularjs源码实现如下：

if (directive.controllerAs) {
    locals.$scope[directive.controllerAs] = controllerInstance;
}

由此可以看到，controlleras只是$scope对象中的属性。因此，可以通过{{controllerAs.xxx}}访问到controllerInstance中的属性。

AngularJS中的事件传播机制

AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app)，然后其他所有的作用域部分都是继承自这个$rootScope的，或者说都是嵌套在主作用域下面的。
那么在作用域之间如何通信呢？其中一个选择就是在应用程序作用域之中创建一个单例服务，然后通过这个服务处理所有子作用域的通信。
在AngularJS中还有另外一个选择：通过作用域中的事件处理通信。不过有所限制，例如，你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单，关系如下：

$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data $on用于接收event与data
$emit和$broadcast可以传多个参数，$on也可以接收多个参数

例子如下：

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <Meta charset="utf-8">
    <title>App Event Test</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script>
        var app =angular.module("exampleApp",[]);
		app.controller('SelfCtrl',function($scope) {
			$scope.click = function () {
				$scope.$broadcast('to-child','child');
				$scope.$emit('to-parent','parent');
			}
		});

		app.controller('ParentCtrl',function($scope) {
			$scope.$on('to-parent',function(event,data) {
				console.log('ParentCtrl',data);       //父级能得到值
			});

			$scope.$on('to-child',data);       //子级得不到值
			});

		});

		app.controller('ChildCtrl',function($scope){
			$scope.$on('to-child',data) {
				console.log('ChildCtrl',data);         //子级能得到值
			});
			$scope.$on('to-parent',data);         //父级得不到值
			});

		});

		app.controller('BroCtrl',function($scope){ 
			$scope.$on('to-parent',data) { 
				console.log('BroCtrl',data);          //平级得不到值 
			}); 

			$scope.$on('to-child',data);          //平级得不到值 
			}); 
		});	    
    </script>
</head>
<body >
	<div ng-controller="ParentCtrl">                <!--父级-->
		<div ng-controller="SelfCtrl">              <!--自己-->
			<button type="button" class="btn btn-default" ng-click="click()">click me</button>
			<div ng-controller="ChildCtrl"></div>   <!--子级-->
		</div>
		<div ng-controller="BroCtrl"></div>         <!--平级-->
	</div>
	<br>
</body>
</html>

效果：