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

要在控制器之間傳遞變量變化需要使用angular中的$broadcast和$emit方法來傳遞，同時使用$on來接收事件并作出響應(yīng)。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、共青城網(wǎng)站維護(hù)、網(wǎng)站推廣。

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監(jiān)聽parent的值的變化，當(dāng)發(fā)生變化時就會“廣播”出parentChange事件并傳遞了參數(shù)（輸入框的值），此時子元素作用域中使用了$scope.$on("parentChange, handler)" 來接收parentChange事件，然后接受輸入框的值并賦值給子作用域中的child變量。這樣就完成了值的傳遞。

效果：

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

emit譯為發(fā)射，即下級傳遞上級。

示例代碼：

<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>

當(dāng)子元素的child值發(fā)生變化時，會向上級發(fā)出childChange事件，此時父元素正在監(jiān)聽的$on(“childChange”)會做出響應(yīng)，將傳遞的參數(shù)賦值給parent，整個流程與 broadcast類似。

效果：

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

上述作用域均存在層級關(guān)系，如果對于同級的作用域該如何做呢？

我們可以使用服務(wù)來廣播事件：

<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">
    <h4> value1:</h4>
    <input type="text" ng-model="value1">
  </div>
  <div ng-controller="bro2">
    <h4>value2:</h4>
    <input type="text" ng-model="value2">
  </div>
</body>

我們在服務(wù)中運(yùn)用了$rootScope，所有的作用域都從屬于它，基于這點(diǎn)，我們可以在根作用域中廣播事件，$rootScope.$broadcast("valueChange", n);，當(dāng)每個子作用域中的值發(fā)生變化時我們都會調(diào)用服務(wù)中的change 方法來廣播這個事件，同時每個作用域又都在監(jiān)聽$on("valueChange") 事件并作出相應(yīng)處理，這樣就實(shí)現(xiàn)了子作用域中的值會傳遞給兄弟作用域了。

效果為：

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞名稱：Angular中$broadcast和$emit的使用方法詳解
網(wǎng)頁鏈接：http://aaarwkj.com/article12/jjhcdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、域名注冊、自適應(yīng)網(wǎng)站、虛擬主機(jī)、移動網(wǎng)站建設(shè)、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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