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

本文轉載自查看原文 2018-08-25 19:04 1779

要在控制器之間傳遞變量變化需要使用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") 事件並作出相應處理，這樣就實現了子作用域中的值會傳遞給兄弟作用域了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 AngularJS的學習--$on、$emit和$broadcast的使用 AngularJS的學習 $on、$emit和$broadcast的使用 AngularJS 筆記——$on、$emit和$broadcast的使用與區別 angular localStorage使用方法 angularjs的$on、$emit、$broadcast 單例模式和angular的services的使用方法 Angular 4 變更檢測機制 ChangeDetectorRef 使用方法 angular5 ng-content使用方法 angularjs事件通信$on，$emit，$broadcast詳解 angular中的方法ng-repeat的是使用