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

Angular 父子作用域之间交互（$on、$emit和$broadcast）

2016-12-17 11:28 429 查看


Angular 父子作用域之间交互（$on、$emit和$broadcast）

字数610 阅读155 评论0 喜欢0

Angular 控制器中的 $scope 在各作用域之间遵循 JS 的对象原型继承方式

当子作用域中没有该对象时，默认向上（父作用域）寻找；子作用域有该对象时，使用子作用域对象。

注：这里的父作用域包含直接父级和祖先，子作用域包含直接子级和更下层级

例如，HTML如下：
<body ng-app="myApp">
<div ng-controller="fatherCtrl">
<input type="text" ng-model="name" ng-change="nameOnChange()">
<h1>Father: {{name}}!</h1>
<div ng-controller="sonCtrl">
<input type="text" ng-model="name" ng-change="nameOnChange()">
<h1>Son: {{name}}</h1>
</div>
</div>
</body>


fatherCtrl 和 sonCtrl 里都使用了 name


sonCtrl 里没有定义 name

var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
$scope.name = "father";
});
app.controller('sonCtrl', function ($scope) {

});


这时改变 sonCtrl 直接读取 fatherCtrl 中的 name



0001.gif


sonCtrl 里定义了 name

var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
$scope.name = "father";
});
app.controller('sonCtrl', function ($scope) {
$scope.name = "son";
});


这时 sonCtrl 和 fatherCtrl 中的 name 互相不影响



0002.gif

如果想让不同作用域之间的数据互相传递，就需要用到事件系统里的 $on、$emit和$broadcast。

简单来说 ：
$on

用于监听事件
$emit

用于向上分发（子作用域向父作用域）
$broadcast

用于向下广播（父作用域向子作用域）


向上分发

var
b656
app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
$scope.name = "father";
$scope.$on ('test', function(e, newName) {
$scope.name = newName;
});
});
app.controller('sonCtrl', function ($scope) {
$scope.name = "son";
$scope.nameOnChange = function () {
$scope.$emit ('test', $scope.name);
}
});


sonCtrl 中 nameOnChange 函数调用 $emit 事件，向上分发 $scope.name

fatherCtrl 中 $on 事件监听到结果，修改$scope.name 的值

在修改 sonCtrl 的 name 时，fatherCtrl 的 name 随之改变，但修改 fatherCtrl 的 name 时 sonCtrl 的 name 不变化



0003.gif


向下广播

var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
$scope.name = "father";
$scope.nameOnChange = function () {
$scope.$broadcast ('test', $scope.name);
}
});
app.controller('sonCtrl', function ($scope) {
$scope.name = "son";
$scope.$on ('test', function(e, newName) {
$scope.name = newName;
});
$scope.nameOnChange = function () {
// $scope.$emit ('test', $scope.name);
}
});


与向上分发效果相反

fatherCtrl 中 nameOnChange 函数调用 $broadcast 事件，向下广播 $scope.name

sonCtrl 中 $on 事件监听到结果，修改$scope.name 的值

在修改 fatherCtrl 的 name 时，sonCtrl 的 name 随之改变，但修改 sonCtrl 的 name 时 fatherCtrl 的 name 不变化
注：这里在 sonCtrl 里也需要定义 nameOnChange ，否则会默认调用父级的


http://www.jianshu.com/p/afb5dc7ac89a
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航