您的位置：首页 > Web前端 > AngularJS

angularJS如何让控制器与控制器进行通信，个人理解。

2016-05-24 10:12 609 查看

子–>父：$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', function(e, 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部分

var app = angular.module('app', []);

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', function($scope, instance) {

$scope.add = function() {

$scope.name = instance.name;

};

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航