欢迎使用CSDN-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

AnJoker

最新推荐文章于 2021-01-07 23:01:28 发布

阅读量352

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/AnJoker/article/details/53404713

版权

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Angular

scope和 $scope和$ rootScope事件机制之

emit、 $emit、$ broadcast和

on作者：u010730126欢迎大家到我的博客查看本文对应内容，关注和交流对于Angular和Ionic学习的理解。Angular按照发布/订阅模式设计了其事件系统，使用时需要“发布”事件，并在适当的位置“订阅”或“退订”事件，就像邮箱里面大量的订阅邮件一样，当我们不需要时就可以将其退订了。具体到开发中，对应着 $on 作者：u010730126 欢迎大家到我的博客查看本文对应内容，关注和交流对于Angular和Ionic学习的理解。 Angular按照发布/订阅模式设计了其事件系统，使用时需要“发布”事件，并在适当的位置“订阅”或“退订”事件，就像邮箱里面大量的订阅邮件一样，当我们不需要时就可以将其退订了。具体到开发中，对应着$ scope和

rootScope的 $rootScope的$ emit、

broadcast和 $broadcast和$ on方法。本文介绍Angular的事件机制，包括

scope和 $scope和$ rootScope处理事件上的异同，

broadcast、 $broadcast、$ emit和

on的使用方式及他们区别等内容。 $on的使用方式及他们区别等内容。$ scope与

scope之间的关系， $scope之间的关系，$ scope与

rootScope之间的关系要理解Angular的事件机制，首先需要了解 $rootScope之间的关系要理解Angular的事件机制，首先需要了解$ scope与

scope之间的关系以及 $scope之间的关系以及$ scope与

rootScope之间的关系。 $rootScope之间的关系。$ rootScope是唯一真神，是万域起源，是所有

scope的最终祖先。而 $scope的最终祖先。而$ scope与

scope之间可能的关系包括父子关系和兄弟关系。还记得controller之间的关系吗，Angular为每个controller分配一个独立的 $scope之间可能的关系包括父子关系和兄弟关系。还记得controller之间的关系吗，Angular为每个controller分配一个独立的$ scope，controller之间的关系也对应着$scope之间的关系：

1
2
3
4
5
6
7
8
9
发布、订阅、退订
$broadcast和$ emit用于发布事件，他们将事件名称和事件内容发布出去，就像是高考榜单一样，事件名称相当于考生的名字，而事件内容相当于考生的成绩等信息：

$scope.$ broadcast(‘EVENT_NAME’, ‘Data to send’);
$scope.$ emit(‘EVENT_NAME’, ‘Data to send’);
1
2
$on用于订阅事件，事件名称是订阅的唯一标识，每个考生看榜单时都要寻找自己的名字，然后根据自己的成绩等信息决定下一步应该报考什么学校：

$scope.$ on(‘EVENT_NAME’, function(event, args) {
// balabala
});
1
2
3
Angular的退订事件有些奇怪，并没有类似于其他语言的$off方法，所以不要想当然的按照如下方式进行事件的退订操作：

// 不要这样做
$scope.$ off(‘EVENT_NAME’);
1
2
事实上，Angular的事件退订方法隐藏在事件订阅里面：使用$on订阅事件时会返回一个函数，而此函数就是用来退订事件的方法，就像是考生看到了自己的成绩后禀告父母大人，“商量着”选取学校填报志愿，而此志愿单就是结束整个高考榜单的结束：

// 订阅事件返回用于退订事件的函数
var deregister = $scope.$ on(‘EVENT_NAME’, function(event, args) {
// balabala
});

// 退订事件
deregister();
1
2
3
4
5
6
7
$broadcast相当于战斗机轰炸，$ emit相当于射箭
$broadcast和$ emit都用于发布事件，但从名字就可以看出他们的不同点： $broadcast是自上而下的广播，所有能听到的都可以对其进行反应。而$ emit是自下而上的射箭，只有在箭矢的轨迹上才能对其做出反应。

具体到Angular上，即从一个 $scope上通过$ broadcast发布的事件，他的所有后代$scope都可以对此事件做出响应：

// 父 $scope通过$ broadcast发布事件
app.controller(‘ParentCtrl’, [‘ $scope', function($ scope) {
$scope.$ broadcast(“parent”, ‘Data to Send’);
}])
//所有子 $scope都可以通过$ on订阅事件
.controller(‘SiblingOneCtrl’, [‘ $scope', function($ scope) {
$scope.$ on(“parent”, function(event, ‘Data to Send’) {
// balabala
});
}])
.controller(‘SiblingTwoCtrl’, [‘ $scope', function($ scope) {
$scope.$ on(“parent”, function(event, ‘Data to Send’) {
// balabala
});
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
而通过 $emit发布的事件，只有他的祖先$ scope可以做出响应，并且其中任一祖先都可以将此事件终结掉，不让其继续传播：

// 子 $scope通过$ emit发布事件
app.controller(‘SiblingOneCtrl’, [‘ $scope', function($ scope) {
$scope.$ emit(“sib1”, ‘Data to Send’);
}])
// 父 $scope通过$ on订阅事件
.controller(‘ParentCtrl’, [‘ $scope', function($ scope) {
$scope.$ on(“sib1”, function(event, ‘Data to Send’) {
// balabala
});
}])
// 其兄弟 $scope对其$ emit的事件一无所知，所以不能订阅其事件
.controller(‘SiblingTwoCtrl’, [‘ $scope', function($ scope) {
// 不要这样做
$scope.$ on(“sib1”, function(event, ‘Data to Send’) {
// balabala
});
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
在$emit发布事件的响应道路上，其任一祖先如果感觉不再需要此事件了，就可以通过如下方式终结此事件：

app.controller(‘ParentCtrl’, [‘ $scope', function($ scope) {
$scope.$ on(“sib1”, function(event, ‘Data to Send’) {
// balabala
event.stopPropagation(); // 终止事件继续“冒泡”
});
}])
1
2
3
4
5
6
$rootScope的$ broadcast和 $emit 上面说过$ rootScope是所有 $scope的最终祖先，所以通过$ rootScope的 $broadcast发布的事件可以被所有$ scope接收到，包括$rootScope：

app.controller(‘SomeCtrl’, [‘ $rootScope', function($ rootScope) {
$rootScope.$ broadcast(“rootEvent”, ‘Data to Send’);

// $rootScope也可以通过$on订阅从$rootScope.$broadcast发布的事件
$rootScope.$on("rootEvent", function(event, 'Data to Send') {
    // balabala
});

}])
// 所有 $scope都能够通过$ on订阅从 $rootScope.$ broadcast发布的事件
.controller(‘ParentCtrl’, [‘ $scope', function($ scope) {
$scope.$ on(“rootEvent”, function(event, ‘Data to Send’) {
// balabala
});
}])
.controller(‘SiblingOneCtrl’, [‘ $scope', function($ scope) {
$scope.$ on(“rootEvent”, function(event, ‘Data to Send’) {
// balabala
});
}])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
而 $rootScope的$ emit就有些怪异了，按照上面的描述， $rootScope是没有祖先的，所以我们可能会想到其$ emit会没有任何作用，但事实并不如此： $rootScope.$ emit发布的事件，只能通过 $rootScope.$ on订阅，而其他$scope对此一无所知:

app.controller(‘SomeCtrl’, [‘ $rootScope', function($ rootScope) {
$rootScope.$ emit(“rootEvent”, ‘Data to Send’);

// 只有$rootScope可以通过$on订阅从$rootScope.$emit发布的事件
$rootScope.$on("rootEvent", function(event, 'Data to Send') {
    // balabala
});

}])
// $scope不能够通过$ on订阅从 $rootScope.$ emit发布的事件
.controller(‘ParentCtrl’, [‘ $scope', function($ scope) {
// 不要这样做
$scope.$ on(“rootEvent”, function(event, ‘Data to Send’) {
// balabala
});
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
退订 $rootScope上的订阅事件当使用$ rootScope. $on订阅事件时，需要手动退订事件，一般在其所处$ scope的$destory事件中退订：

app.controller(‘SomeCtrl’, [‘ $rootScope', '$ scope’, function( $rootScope,$ scope) {
var deregister = $rootScope.$ on(“rootEvent”, function(event, ‘Data to Send’) {
// balabala
});

$scope.$on('$destory', function() {
    deregister(); // 退订事件
});

}])
1
2
3
4
5
6
7
8
9
那通过 $scope.$ on订阅的事件呢？一般不需要手动退订，因为Angular会帮我们退订，但是如果需要自己控制何时退订事件，也可以通过上述方式进行退订。

事件命名的建议
在开发中，对于变量的命名、函数的命名、文件的命名都有一定的规范，既要保证可读性，也需要保证无混淆性。在Angular的事件机制中，因为事件可能会跨函数，甚至可能跨文件，所以对于事件名一定要保证唯一性，所以建议事件名都加上特定的前缀，以便区分。如下几个例子：

$scope.$ emit(‘trash:delete’, data);
$scope.$ on(‘trash:delete’, function (event, data) {…});

$scope.$ broadcast(‘trash:clear’, data);
$scope.$ on(‘trash:clear’, function (event, data) {…});
1
2
3
4
5
结语
Angular的事件机制很智能，而且一般来说总能符合我们的预期，但是如果不能深入理解其背后的机制，可能会踏入某些深坑，本文尝试说明Angular的事件机制，如果有理解不正确的地方，请留言告知。