【轉】angularJS的兄弟controller之間如何正確的通信

forsigner 發布于2019-08-20 18:25 / 2879人閱讀

摘要：每個的指向指向父級作用域。之間的通信本質上是當前的所在的如何跟其他上的進行通信。傳遞事件有種方式觸發的事件要通知整個事件系統允許任意作用域處理這個事件就要向下傳播。作用域上使用進行事件監聽。示例關于同級之間通信我的一個提問

原文鏈接：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...

云服務器 GPU云服務器兩臺服務器之間的通信 angularjs的cdn 域名的正確格式正確的404配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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