子–>父：$emit
event传播过程是这样的：
- 子scope中的控制器通过 $scope.$emit 注册一个向上传播的事件
- 该事件会经过每一层的父scope，但是每一层父scope不会去处理
如果要处理，就在想要处理的父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部分
- （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
