angular中控制器之間傳遞參數(shù)的方式

lauren_liuling 發(fā)布于2019-08-20 16:00 / 3432人閱讀

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

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

1.通過$rootscope傳參

首先，在angular中存在作用域的繼承，繼承作用域符合 JavaScript 的原型繼承機(jī)制，這意味著如果我們?cè)谧幼饔糜蛑性L問一個(gè)父作用域中定義的屬性，JavaScript 首先在子作用域中尋找該屬性，沒找到再從原型鏈上的父作用域中尋找，如果還沒找到會(huì)再往上一級(jí)原型鏈的父作用域?qū)ふ摇Ｔ?AngularJS 中，作用域原型鏈的頂端是$rootScope，AnguarJS 將會(huì)尋找到$rootScope 為止，如果還是找不到，則會(huì)返回 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，但我們發(fā)現(xiàn)在這個(gè)控制器中并未為$scope添加name，于是向父作用域查找，發(fā)現(xiàn)父作用域存在該屬性，所以可以打印出來。

$rootscope 是所有 $scope 的最上層對(duì)象,可以理解為一個(gè) Angular 應(yīng)用中的全局作用域?qū)ο蟆Ｋ詾?rootscope添加的屬性，在所有的控制器中都可以訪問得到。但是為它附加太多邏輯或者變量并不是一個(gè)好主意,和js全局污染是一樣的.

2.通過事件的方式

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

$on(name,handler) 注冊(cè)一個(gè)事件處理函數(shù)，該函數(shù)在特定的事件被當(dāng)前作用域收到（從父級(jí)或者子級(jí)作用域）時(shí)將被調(diào)用。

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

            event.targetScope 獲取傳播事件的作用域
            event.currentScope 獲取接收事件的作用域
            event.name 傳播的事件的名稱
            event.stopPropagation() 阻止事件進(jìn)行冒泡傳播,僅在$emit事件中有效
            event.preventDefault() 阻止傳播事件的發(fā)生  
            event.defaultPrevented 如果調(diào)用了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;//接受值
            
        });
    }]);

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

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

補(bǔ)充：之前遇到一個(gè)需求是，父控制器中，觸發(fā)change事件后，獲取數(shù)據(jù)傳遞給子控制，但是在子控制器只需要接受一次，發(fā)現(xiàn)可通過如下方式：

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

3.通過服務(wù)

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

    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這個(gè)服務(wù)中添加對(duì)象，然后在需要用到的控制器中，通過依賴注入的方式導(dǎo)入該服務(wù)，在myCtrl控制器中修改這個(gè)對(duì)象，在myCtrl1中也會(huì)得到修改過后的值。