分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularJS如何让控制器与控制器进行通信，个人理解。，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

子–>父：$emit

event传播过程是这样的：

子scope中的控制器通过 $scope.$emit 注册一个向上传播的事件
该事件会经过每一层的父scope，但是每一层父scope不会去处理

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">
<@R_489_10283@e>JS Bin</@R_489_10283@e>
</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">
<@R_489_10283@e>JS Bin</@R_489_10283@e>
</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">
<@R_489_10283@e>通过 angular 服务实现控制器通信</@R_489_10283@e>
</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部分
:1px; border-bottom-style:dashed; border-bottom-color:rgb(221,[]); angular.element(document).ready(function readyHandler() { angular.bootstrap(document,['app']); }); app.factory('instance',function(){ return {}; }); app.controller('MainCtrl',function($scope,instancE) { $scope.change = function() { instance.name = $scope.text; }; }); app.controller('sideCtrl',instancE) { $scope.add = function() { $scope.name = instance.name; }; });