AngularJS 通過事件實現跨作用域傳值

跨作用域傳值

跨作用域傳值, 可以通過 子作用域共同使用父作用域的變量或者使用 單例的service實現,  這兩種方式,在父級作用域或者 Service 單例的變量值改變的時候, 無法實現把值再自動處理賦值給作用域.

但是通過事件鏈 的方式就可以實現實時更新 , 拿比較複雜的兄弟作用域的傳值作爲例子. 

如圖所示:子作用域, 向上發佈事件($emit), 那麼他的所有父級作用域鏈都會收到事件, 這個之後他的上一級作用域收到後接受call事件, 在call 事件中觸發向下發佈($broadcast)show事件. 這個事件是遍歷發佈者的所有子節點樹, 所以不要把這個事件加到級別較高的父作用域

看看一下代碼

子作用域1 向上發佈call事件

        $scope.$emit('call', data);

父作用域1接受call事件同時向下發佈 show

    $scope.$on('call', function (event, data) {
        $scope.$broadcast('show',data);//廣播傳值
    });

子作用域2,21,31 接収事件

    $scope.$on('show', function (event, data) {
        //處理獲得的 data
   

    });

這樣子作用域1, 就把值, 給了子作用域2,21,31 .