欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Angular中$broadcast和$emit的使用方法详解

程序员文章站 2022-04-09 12:49:32
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递，同时使用$on来接收事件并作出响应。 broadcast译为广播，即上级传...

要在控制器之间传递变量变化需要使用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变量。 这样就完成了值的传递。

效果：

Angular中$broadcast和$emit的使用方法详解

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类似。

效果：

Angular中$broadcast和$emit的使用方法详解

上述作用域均存在层级关系，如果对于同级的作用域该如何做呢？

我们可以使用服务来广播事件：

<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") 事件并作出相应处理，这样就实现了子作用域中的值会传递给兄弟作用域了。

效果为：

Angular中$broadcast和$emit的使用方法详解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： vue中keep-alive组件的入门使用教程

下一篇： Python图像处理之gif动态图的解析与合成操作详解

推荐阅读