angular中控制器之間傳遞參數的方式

lauren_liuling 發布于2019-08-20 16:00 / 3423人閱讀

摘要：在中，每個控制器都會有自己的，通過為這個對象添加屬性賦值，就可以將數據傳遞給模板進行渲染，每個只會在自己控制器內起作用，而有時候需要用到其他控制器中的數據，這個時候就要考慮到控制器之間參數的傳遞了。向當前作用域下的子作用域發送一個事件。

在angular中，每個controller（控制器）都會有自己的$scope，通過為這個對象添加屬性賦值，就可以將數據傳遞給模板進行渲染，每個$scope只會在自己控制器內起作用，而有時候需要用到其他控制器中的數據，這個時候就要考慮到控制器之間參數的傳遞了。

1.通過$rootscope傳參

首先，在angular中存在作用域的繼承，繼承作用域符合 JavaScript 的原型繼承機制，這意味著如果我們在子作用域中訪問一個父作用域中定義的屬性，JavaScript 首先在子作用域中尋找該屬性，沒找到再從原型鏈上的父作用域中尋找，如果還沒找到會再往上一級原型鏈的父作用域尋找。在 AngularJS 中，作用域原型鏈的頂端是$rootScope，AnguarJS 將會尋找到$rootScope 為止，如果還是找不到，則會返回 undefined。

      
        
            {{name}}
            
            {{name}}
            
        
    
    var app=angular.module("app",[]);
    app.controller("parent", ["$scope",function ($scope) {
        $scope.name="hello";
    }]);
    app.controller("son", ["$scope",function ($scope) {
        console.log($scope.name);//hello
    }]);

在子控制器中打印name，但我們發現在這個控制器中并未為$scope添加name，于是向父作用域查找，發現父作用域存在該屬性，所以可以打印出來。

$rootscope 是所有 $scope 的最上層對象,可以理解為一個 Angular 應用中的全局作用域對象。所以為$rootscope添加的屬性，在所有的控制器中都可以訪問得到。但是為它附加太多邏輯或者變量并不是一個好主意,和js全局污染是一樣的.

2.通過事件的方式

首先介紹一下angular中的事件廣播：

$on(name,handler) 注冊一個事件處理函數，該函數在特定的事件被當前作用域收到（從父級或者子級作用域）時將被調用。

$emit(name,args) 向當前父作用域發送一個事件，直至根作用域。
$broadcast(name,args) 向當前作用域下的子作用域發送一個事件。
name表示事件名稱，args表示事件傳播的數據，handler表示在接受到傳遞時要執行的回調，該回調中有event參數，表示事件，有如下方法：

            event.targetScope 獲取傳播事件的作用域
            event.currentScope 獲取接收事件的作用域
            event.name 傳播的事件的名稱
            event.stopPropagation() 阻止事件進行冒泡傳播,僅在$emit事件中有效
            event.preventDefault() 阻止傳播事件的發生  
            event.defaultPrevented 如果調用了preventDefault事件則返回true

1）子向父控制器傳值

    
        
            {{name}}
            
            {{name}}
            
        
    
    var app=angular.module("app",[]);
    app.controller("parent", ["$scope",function ($scope) {
        $scope.$on("call", function(event,data){
            $scope.name=data;
            console.log(data);
        });
    }]);
    app.controller("son", ["$scope",function ($scope) {
        $scope.name="hello";
        $scope.$emit("call", $scope.name);
    }]);

2）父向子控制器傳值

    var app=angular.module("app",[]);
    app.controller("parent", ["$scope",function ($scope) {
        $scope.name="hello";
        $scope.$broadcast("call", $scope.name);//傳值
    }]);
    app.controller("son", ["$scope",function ($scope) {
        $scope.$on("call", function(event,data1){
            $scope.name1=data1;//接受值
            
        });
    }]);

注意：參數name相同時，父子控制器之間才可以傳值

這種方式不可實現兄弟級傳值，不過可以使用父級控制器作為中介，先由子控制器傳值給父控制器，然后再由父控制器傳遞給另外的子控制器。

補充：之前遇到一個需求是，父控制器中，觸發change事件后，獲取數據傳遞給子控制，但是在子控制器只需要接受一次，發現可通過如下方式：

var scan=$scope.$on(name，handler)；scan();這樣子控制器就只接受可一次，避免了多次接受帶來的影響！

3.通過服務

在angular中服務是一個單例，所以在服務中生成一個對象，該對象就可以利用依賴注入的方式在所有的控制器中共享。
例：

    var app=angular.module("app",[]);
    app.controller("myCtrl", ["$scope","appService",function ($scope,appService) {
        appService.name="hi!!"
    }]);
    app.controller("myCtrl1", ["$scope", "appService",function ($scope,appService) {
        $scope.name=appService.name;
    }]);
    app.service("appService", [function(){
        this.name="hello";
    }]);

通過在appService這個服務中添加對象，然后在需要用到的控制器中，通過依賴注入的方式導入該服務，在myCtrl控制器中修改這個對象，在myCtrl1中也會得到修改過后的值。

GPU云服務器云服務器 js中控制器 js的map參數傳遞 js之間傳遞數據 php 之間傳遞數據

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82647.html

AngularJS簡述

流行框架簡介 angularjs是一款非常優秀的前端高級JS框架，由谷歌團隊開發維護，能夠快速構建單頁web應用，化繁為簡無論是angularjs還是jQuery都是用原生JS封裝的庫：對代碼進行封裝，調用封裝的方法，簡化操作傳統方式是用get方式獲取元素，然后點方法 jQuery庫實現了對獲取方式的封裝，對方法的封裝框架：提供代碼書寫規則，按照規則去寫代碼，框架會幫我們實現響應的功能...

Jason 2019-08-23 11:25 評論0 收藏0
vue中組件之間傳遞數據的方法

摘要：在父組件中，需要引用子組件的地方，傳入數據。其實這種方法和中控制器之間傳遞數據的有點類似的。作用域在vue中，組件實例的作用域是孤立的，父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數據。下面幾種方法可以實現組件之間數據的傳遞。通過prop傳遞數據 1）在子組件中，使用prop屬性，顯示的...

singerye 2019-08-20 18:19 評論0 收藏0
使用AngularJS構建應用時遇到的問題及解決方案（版本為1.3.9）

摘要：最近在公司使用用完成了一個項目，在此記錄一下過程中遇到的問題及解決方案。其他兩種方法可參考站內文章控制器如何通信結語以上為我在編寫一個應用時遇到的問題及解決方案，記錄并分享出來，歡迎大家指正最近在公司使用用AngularJS（1.3.9）完成了一個項目，在此記錄一下過程中遇到的問題及解決方案。使用$http服務發送ajax請求時后端無法判斷請求是XMLHttpRequest 問題...

cuieney 2019-08-19 17:25 評論0 收藏0
AngularJs

摘要：當左右服務都被解析并返回時，會以服務為參數去調用組件的構造函數。發送或廣播的消息應該限定在最小的作用域。置頂一個通過，發送的消息列表并且窒息的管理以防止命名沖突在需要格式化數據時，將格式 angular 數據雙向綁定的框架提供數據綁定，DOM指令。angular，定義了一套規則，開發中就必須遵守規則，這套規則為項目提供了一套解決方案。模塊，組件，模板，元數據，數據綁定, 指令，服務...

sf190404 2019-08-19 18:44 評論0 收藏0