子–>父：$emit
event传播过程是这样的：
- 如果要处理，就在想要处理的父scope中使用 $scope.$on 监听，就好了
- DEMO:
HTML: - <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<Meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-controller="parent">
<p>parent: {{sports}}</p>
<div ng-controller="child">
<p>child: <button ng-click="pass()">老爹接住</button></p>
</div>
</div>
</body>
</html>
- JS部分
- var app = angular.module('app',[]);
angular.element(document).ready(function readyHandler() {
angular.bootstrap(document,['app']);
});
// 父scope上的控制器
function parent($scope) {
$scope.sports = 'Pass me';
$scope.$on('pass',function(e,newLocation) {
$scope.sports = newLocation;
});
}
// 子scope上的控制器
function child($scope) {
$scope.sports = 'well done';
$scope.pass = function() {
$scope.$emit('pass',$scope.sports);
};
}
- 跟JS中的DOM事件一样，如果你不想让你的事件再往更上层传播，在
$on中的处理函数调用e.stopPropagation()即可。
-
父–>子：$broadcast
从父到子，跟子集到父级一样，使用同样用$broadcast注册时间，用 $on 监听着，DEMO。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<Meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-controller="Sandcrawler">
<p>parent: {{sports}}</p>
<button ng-click="recall()">儿子接球</button>
<div ng-controller="Droid">
<p>child: {{sports}}</p>
</div>
</div>
</body>
</html>
- js部分
- var app = angular.module('app',[]);
angular.element(document).ready(function readyHandler() {
angular.bootstrap(document,['app']);
});
// 父scope上的控制器
function Sandcrawler($scope) {
$scope.recall = function() {
$scope.sports = 'good！！！';
$scope.$broadcast('recall',$scope.sports);
};
}
// 子scope上的控制器
function Droid($scope) {
$scope.$on('recall',newLocation) {
$scope.sports = newLocation;
});
}
-
angular服务的方式
在angular中服务是一个单例，在服务中生成一个对象，该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子，在一个控制器修改了服务对象的值，在另一个相邻控制器中获取到修改后的值：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<Meta charset="utf-8">
<title>通过 angular 服务实现控制器通信</title>
</head>
<body>
<h3>通过 angular 服务实现控制器通信</h3>
<div ng-controller="MainCtrl">
<input type="text" ng-model="text" />
<button ng-click="change()">先点我</button>
</div>
<div ng-controller="sideCtrl">
<button ng-click="add()">点过上面的再点我</button>
<p>{{name}}</p>
</div>
</body>
</html>
- JS部分