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 .