這篇文章將為大家詳細講解有關angular中如何實現(xiàn)控制器之間傳遞參數(shù)，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站設計、網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的新平網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

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

1.通過$rootscope傳參

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

<div ng-app="app">
    <div ng-controller="parent">
      {{name}}
      <div ng-controller="son">
      {{name}}
      </div>
    </div>
  </div>
  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)在這個控制器中并未為$scope添加name，于是向父作用域查找，發(fā)現(xiàn)父作用域存在該屬性，所以可以打印出來。

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

2.通過事件的方式

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

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

$emit(name,args) 向當前父作用域發(fā)送一個事件，直至根作用域。

$broadcast(name,args) 向當前作用域下的子作用域發(fā)送一個事件。

name表示事件名稱，args表示事件傳播的數(shù)據(jù)，handler表示在接受到傳遞時要執(zhí)行的回調，該回調中有event參數(shù)，表示事件，有如下方法：

1. event.targetScope 獲取傳播事件的作用域

2. event.currentScope 獲取接收事件的作用域

3. event.name 傳播的事件的名稱

4. event.stopPropagation() 阻止事件進行冒泡傳播,僅在$emit事件中有效

5. event.preventDefault() 阻止傳播事件的發(fā)生  

6. event.defaultPrevented 如果調用了preventDefault事件則返回true

1）子向父控制器傳值

<div ng-app="app">
    <div ng-controller="parent">
      {{name}}
      <div ng-controller="son">
      {{name}}
      </div>
    </div>
  </div>
  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相同時，父子控制器之間才可以傳值

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

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

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中也會得到修改過后的值。

關于“angular中如何實現(xiàn)控制器之間傳遞參數(shù)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

標題名稱：angular中如何實現(xiàn)控制器之間傳遞參數(shù)
當前URL：http://sd-ha.com/article18/iecogp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設、搜索引擎優(yōu)化、全網(wǎng)營銷推廣、品牌網(wǎng)站建設、品牌網(wǎng)站制作、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)