AngularJS - 作用域和controller之间的通信

柔情只为你懂 2022-05-16 11:59 219阅读 0赞

在AngularJs中作用域是非常重要的。

$scope可以嵌套，存在父子作用域，兄弟作用域，那么它们这些作用域相互怎么相互发送信息了。

父子作用域：

看如下代码：（在html标签中添加ng-app='myApp')

angular.module('myApp',[]).controller('controlFather',['$scope',function($scope){
        $scope.contentFirst='sonFirst';
        $scope.contentTwo='sonTwo'
    }])
    .controller('controlSonFirst',['$scope',function($scope){
        $scope.contentFirst='sonFirst2333'
    }])
    .controller('controlSonTwo',['$scope',function($scope){
    
    }])

![70][]子作用域找不到相关的变量，那么就去它的父级作用域中找，一直找到顶层作用域，找到了就停止。

不过AngularJs为了方便，给我们设置了许多很好的服务，比如$parent,  childHead,  childTail （**记得加上'$$' 我也不知道为啥，在csdn显示不了）**

![70 1][]![70 2][]

![70 3][]![70 4][]

$parent给了子作用域使用父作用域的权利，而childHead(第一个） childTail(最后一个）**记得加上'$$' 我也不知道为啥，在csdn显示不了）**给了父作用域使用子作用域的权利

angular.module('myApp',[]).controller('controlFather',['$scope',function($scope){
        
        window.setInterval(function() {
            $scope.$$childHead.contentFirst='I can change you!';
            $scope.$$childTail.contentTwo='I can change you!';
        },1000);
         
    }])
    .controller('controlSonFirst',['$scope',function($scope){
        $scope.contentFirst='sonFirst';
    }])
    .controller('controlSonTwo',['$scope',function($scope){
        $scope.contentTwo='sonTwo';
    }])

![70 5][]父级作用域改变了子作用域。

当没有写在setInterval里面时，childHead和childTail是null。![70 6][]

**（记得加上'$$' 我也不知道为啥，在csdn显示不了，很奇怪）**

为啥要加一个window.setInterval()了？浏览器在解释js文件时，已经把各个控制器都生成了，但是它们的关系和控制那一块都是不知道，只有等到解析html时才确定。html解析时（深度优先原则），父级在前，所以这个时候并不知道它的儿子有哪些，反之却可以（如上一个案例）。

放到setInterval里面为什么可以了，这是因为我们把这个函数已经放到事件队列里面了，只有执行栈空了（主线已经做完了，该确定的都确定了），才会执行事件队列里面的函数。

兄弟作用域 （nextSibling 下一个兄弟 prevSibling 前一个兄弟）**（记得加上'$$' 我也不知道为啥，在csdn显示不了，很奇怪）**

angular.module('myApp',[]).controller('controlFather',['$scope',function($scope){
         
    }])
    .controller('controlSonFirst',['$scope',function($scope){
        $scope.contentFirst='sonFirst';
        console.log($scope.$$nextSibling)
    }])
    .controller('controlSonTwo',['$scope',function($scope){
        $scope.contentTwo='sonTwo';
        console.log($scope.$$prevSibling)
    }])

我想大家应该知道输出什么了吧！ 控制器的关系确定，应该很清楚了吧。

![70 7][]第一个是null,第二个是存在前一个兄弟的。

Angularjs为在scope中为我们提供了冒泡和隧道机制，$broadcast会把事件广播给所有子controller，而$emit则会将事件冒泡传递给父controller，$on则是angularjs的事件注册函数，有了这一些我们就能很快的以angularjs的方式去解决angularjs controller之间的通信。

angular.module('myApp',[]).controller('controlFather',['$scope',function($scope){
        $scope.$on('fatherSolve',function(event,item) {
            var string="I can't solve it, but my son can! "+item; 
            $scope.$broadcast('sonSolve',string);//交给子级一个名为sonSolve的函数解决
        })
    }])
    .controller('controlSonFirst',['$scope',function($scope){
        $scope.change=function(item) {
            $scope.$emit('fatherSolve',item);//交给父级一个名为fatherSolve的函数处理
        }
    }])
    .controller('controlSonTwo',['$scope',function($scope){
        $scope.$on('sonSolve',function(event,item) {//我就是sonSolve
            $scope.contentTwo=item;
        })
    }])

我们给第一个input标签加上一个ng-chang监控内容变化，当内容发生变化时触发change函数，我们注意到change函数又将把任务抛给 了父级（$emit ，一个名为fatherSolve的函数处理)，我们注意到父级又把任务抛给了它的子级（&broadcast,一个名为sonSolve的函数处理）。

![70 8][]第二个·input标签处理了该事件。

其中$on表示事件监听，$emit表示向父级以上的作用域触发事件， $boardcast表示向子级以下的作用域广播事件。

![70 9][]函数的第一个参数event,这是里面的内容。

[70]: /images/20220516/163f77d0c03c485e99a29054dd7cf6dc.png
[70 1]: https://img-blog.csdn.net/20180820201251991?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220516/5edf3a2020f04fbdaafd83f800cf1e90.png
[70 3]: https://img-blog.csdn.net/20180820201347162?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: /images/20220516/c0fc7d6197cd458dbde2fbef6a57a28e.png
[70 5]: /images/20220516/b23a83ff48ce4b4f892c8cf321ce502d.png
[70 6]: /images/20220516/c2ecaff79ef74afe8d4f5fb8f0915b88.png
[70 7]: /images/20220516/68626c5b7f5a4e618e62d84aa6869cc8.png
[70 8]: /images/20220516/0b698604bdeb419dbd3843c113b77844.png
[70 9]: /images/20220516/a62aa4c7be514b78bf7f7a3bfad52375.png