【转】angularJS的兄弟controller之间如何正确的通信

forsigner 发布于2019-08-20 18:25 / 2759人阅读

摘要：每个的指向指向父级作用域。之间的通信本质上是当前的所在的如何跟其他上的进行通信。传递事件有种方式触发的事件要通知整个事件系统允许任意作用域处理这个事件就要向下传播。作用域上使用进行事件监听。示例关于同级之间通信我的一个提问

原文链接：http://www.cnblogs.com/webbes...

AngularJS中的controller是个函数，用来向视图的作用域（$scope）添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。

当我们在创建新的控制器时，angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分，都有父级作用域的存在，顶级就是ng-app所在的层级，它的父级作用域就是$rootScope。

每个$scope的$root指向$rootScope, $cope.$parent指向父级作用域。

cotroller之间的通信本质上是当前的controller所在的$scope如何跟其他controller上的$scope进行通信。

通常有3中解决方式：

利用作用域继承的原理，子控制器访问父级控制器中的内容。
使用angularJS中的事件，也就是使用$on,$emit,$broadcast进行消息传递
使用angularJS中的服务

第一种方式

即作用域嵌套作用域，有一定的使用限制，需要作用域嵌套起来，在实际开发中这种场景相对比较少，但也不是没有，这种方式更简单直接。

angularJS中默认情况下，当前作用域中无法找到某个属性时，就会在父级作用域中进行查找，若找不到直至查找到$rootScope。如果在$rootScope中也无法找到程序依旧运行，但视图不会更新。

示例

JavaScript

//Javascript

    app.controller("ParentController", function($scope) { 

        $scope.person = {greeted: false};

    });

    app.controller("ChildController", function($scope) {

        $scope.sayHello = function() {

             $scope.person.name = "Ari Lerner";

        };

    });

    //HTML

     

       

         Say hello

       

       {{ person }}

     

    //result

    {"greeted":true, "name": "Ari Lerner"}

第二种方式

因为作用域是有层次的，所以可以利用作用域链传递事件。

传递事件有2种方式： $broadcast: 触发的事件要通知整个事件系统（允许任意作用域处理这个事件）就要向下传播。 $emit: 如果要提醒一个全局模块，需要通知更高层次的作用域时（例如$rootscope）需要把事件向上传递。

作用域上使用$on进行事件监听。

示例

JavaScript

app.controller("ParentController", function($scope) { 
        $scope.$on("$fromSubControllerClick", function(e,data){
            console.log(data); // hello
        });
    });

    app.controller("ChildController", function($scope) {
        $scope.sayHello = function() {
            $scope.$emit("$fromSubControllerClick","hello");
        };
    });

    //HTML
     
       
         Say hello

在这里想要说的另外一个问题就是事件传播的性能问题，$broadcast+$on的方式回通知所有的子作用域，这里就会有性能问题，所以推荐使用$emit+$on的方式,为了进一步提升性能，定义的事件处理函数要在作用域销毁时一起释放掉。

使用$emit+$on的方式需要我们将事件监听绑定在$rootScope上，例如：

JavaScript

angular
    .module("MyApp")
    .controller("MyController", ["$scope", "$rootScope", function MyController($scope, $rootScope) {
            var unbind = $rootScope.$on("someComponent.someCrazyEvent", function(){
                console.log("foo");
            });
            $scope.$on("$destroy", unbind);
        }
    ]);

但是这种方式有点繁琐，定义多个事件处理函数时整个人都不好了，所以我们来改进一下

利用装饰器来定义一个新的事件绑定函数：

JavaScript

angular
    .module("MyApp")
    .config(["$provide", function($provide){
        $provide.decorator("$rootScope", ["$delegate", function($delegate){
            Object.defineProperty($delegate.constructor.prototype, "$onRootScope", {
                value: function(name, listener){
                    var unsubscribe = $delegate.$on(name, listener);
                    this.$on("$destroy", unsubscribe);
                    return unsubscribe;
                },
                enumerable: false
            });
            return $delegate;
        }]);
    }]);

那么我们在控制器中定义事件处理函数时：

JavaScript

angular
    .module("MyApp")
    .controller("MyController", ["$scope", function MyController($scope) {
            $scope.$onRootScope("someComponent.someCrazyEvent", function(){
                console.log("foo");
            });
        }
    ]);

第三种方式

利用angularJS中service单例模式的特性，服务(service)提供了一种能在应用的整个生命周期内保持数据的方式，能够在控制器之间进行通信，且能保证数据的一致性。

一般我们都会封装server来为应用提供访问数据的接口，或者跟远程进行数据交互。

示例

JavaScript

var myApp = angular.module("myApp", []);
myApp.factory("Data", function() {
  return {
    name: "Ting"
  }
});

myApp.controller("FirstCtrl", function($scope, Data) {
  $scope.data = Data;
  $scope.setName = function() {
    Data.name = "Jack";
  }
});

myApp.controller("SecondCtrl", function($scope, Data) {
  $scope.data = Data;
  $scope.setName = function() {
    Data.name = "Moby";
  }
});

关于同级controller之间通信我的一个提问：https://segmentfault.com/q/10...

私有云海外云主机两台服务器之间的通信 angularjs的cdn 域名的正确格式正确的404配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84489.html

使用AngularJS构建应用时遇到的问题及解决方案（版本为1.3.9）

摘要：最近在公司使用用完成了一个项目，在此记录一下过程中遇到的问题及解决方案。其他两种方法可参考站内文章控制器如何通信结语以上为我在编写一个应用时遇到的问题及解决方案，记录并分享出来，欢迎大家指正最近在公司使用用AngularJS（1.3.9）完成了一个项目，在此记录一下过程中遇到的问题及解决方案。使用$http服务发送ajax请求时后端无法判断请求是XMLHttpRequest 问题...

cuieney 2019-08-19 17:25 评论0 收藏0
AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0
vue面试

摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。路由的钩子函数首页可以控制导航跳转，，等，一般用于页面的修改。谈谈你对MVVM开发模式的理解 MVVM分为Model、View、ViewModel三者。Model 代表数据模型，数据和业务逻辑都在Model层中定义；View 代表UI视图，负责数据的展示；...

vspiders 2019-08-23 18:38 评论0 收藏0
AngularJs功能（九）--路由

摘要：该内的内容会根据路由的变化而变化。配置，用来定义路由规则。由此我们就需要另一个第三方路由模块，叫做，当然它是基于开发的。造成这种现象的最根本原因路由没有明确的父子层级关系。监听路由路由状态发生改变时可以通过监听，通过注入实现状态的管理。何为路由路由机制运可以实现多视图的单页Web应用（single page web application，SPA）。单页应用在使用期间不会重新加载...

mingde 2019-08-22 13:59 评论0 收藏0
创建自定义指令

摘要：我们通常通过其区分大小写的规范化名称例如，来定义指令。在其目前的实现上，我们应该需要去创建一些不同点控制器用来重用这个指令。如此，绑定是理想的将回调函数绑定到指令行为。这被指令调用指明。前缀表示该指令在其父元素上搜索控制文档翻译至angularjs.org. 文档解释了您何时想在AngularJS应用程序中创建自己的指令，以及如何实现它们。 | 建议搭配原文食用 | 什么是指令？在...

zzbo 2019-08-26 11:55 评论0 收藏0