Angular中$broadcast和$emit的使用方法详解
编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
本篇文章主要介绍了Angular中$broadcast和$emit的使用方法详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递，同时使用$on来接收事件并作出响应。
broadcast译为广播，即上级传递下级。
示例代码：
<script src="../angular.js"></script>
<script>
angular.module("app", [])
.controller("child", function($scope) {
$scope.$on("parentChange", function(e, m) {
$scope.change = "changed";
$scope.child = m;
})
})
.controller("parent", function($scope) {
$scope.$watch("parent", function(n, o) {
if (n == o) {
return;
}
$scope.$broadcast("parentChange", n)
})
})
</script>
<body>
<div ng-controller="parent">
Parent: {{parent}}
<input type="text" ng-model="parent">
<div ng-controller="child">
{{change}} Child: {{child}}
</div>
</div>
</body>
上述代码使用$watch监听parent的值的变化，当发生变化时就会“广播”出parentChange事件并传递了参数（输入框的值），此时子元素作用域中使用了$scope.$on("parentChange, handler)" 来接收parentChange事件，然后接受输入框的值并赋值给子作用域中的child变量。 这样就完成了值的传递。
效果：
emit译为发射，即下级传递上级。
示例代码：
<script src="../angular.js"></script>
<script>
angular.module("app", [])
.controller("parent", function($scope) {
$scope.$on("childChange", function(e, m) {
$scope.change = "changed";
$scope.parent = m
})
})
.controller("child", function($scope) {
$scope.$watch("child", function(n, o) {
if (n == o) {
return;
}
$scope.$emit("childChange", n)
})
})
</script>
<body ng-controller="parent">
{{change}} Parent: {{parent}}
<div ng-controller="child">
Child: {{child}}
<input type="text" ng-model="child">
</div>
</body>
当子元素的child值发生变化时，会向上级发出childChange事件，此时父元素正在监听的$on(“childChange”)会做出响应，将传递的参数赋值给parent，整个流程与 broadcast类似。
效果：
上述作用域均存在层级关系，如果对于同级的作用域该如何做呢？
我们可以使用服务来广播事件：
<script src="../angular.js"></script>
<script>
angular.module("app", [])
.service("myServive", function($rootScope) {
return {
change: function(n) {
$rootScope.$broadcast("valueChange", n);
}
}
})
.controller("bro1", function($scope, myServive) {
$scope.$watch("value1", function(n) {
myServive.change(n);
})
$scope.$on("valueChange", function(e, m) {
console.log("value1");
$scope.value1 = m;
})
})
.controller("bro2", function($scope, myServive) {
$scope.$watch("value2", function(n) {
myServive.change(n);
})
$scope.$on("valueChange", function(e, m) {
console.log("value2");
$scope.value2 = m;
})
})
</script>
<body>
<div ng-controller="bro1">
<h3> value1:</h3>
<input type="text" ng-model="value1">
</div>
<div ng-controller="bro2">
<h3>value2:</h3>
<input type="text" ng-model="value2">
</div>
</body>
我们在服务中运用了$rootScope，所有的作用域都从属于它，基于这点，我们可以在根作用域中广播事件，$rootScope.$broadcast("valueChange", n);，当每个子作用域中的值发生变化时我们都会调用服务中的change 方法来广播这个事件，同时每个作用域又都在监听$on("valueChange") 事件并作出相应处理，这样就实现了子作用域中的值会传递给兄弟作用域了。
效果为：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。