首頁 > web前端 > js教程 > AngularJS 控制器如何在沒有巢狀的情況下進行通訊?

AngularJS 控制器如何在沒有巢狀的情況下進行通訊?

Linda Hamilton
發布: 2024-12-08 10:13:11
原創
352 人瀏覽過

How Can AngularJS Controllers Communicate Without Nesting?

Angular 控制器之間的通訊

在 AngularJS 中,促進控制器之間的通訊通常是必要的。但是,當控制器未嵌套時,從一個控制器存取另一個控制器中的變數會帶來挑戰。

在沒有繼承的情況下傳遞變數

將第一個控制器(Ctrl1) 作為使用$scope 向第二個控制器(Ctrl2) 傳遞參數,由於未定義的錯誤,Ctrl1 不可行。類似地,使用 Ctrl2.prototype = new Ctrl1(); 從 Ctrl1 繼承屬性到 Ctrl2;也是不成功。

解決方案:利用服務

要在控制器之間共享變數而不嵌套,有效的解決方案是創建一個服務並將其註入到所有相關控制器中。服務是一個 Angular 元件,可以注入到多個控制器或指令中以共享功能。

範例服務:

1

2

3

4

5

6

7

8

9

10

11

12

angular.module('myApp').service('sharedProperties', function() {

  var property = 'First';

 

  return {

    getProperty: function() {

      return property;

    },

    setProperty: function(value) {

      property = value;

    }

  };

});

登入後複製

在控制器中的用法:

1

2

3

4

5

6

7

8

function Ctrl1($scope, sharedProperties) {

  sharedProperties.setProperty('New First');

}

 

function Ctrl2($scope, sharedProperties) {

  $scope.prop2 = 'Second';

  $scope.both = sharedProperties.getProperty() + $scope.prop2;

}

登入後複製

透過服務將sharedProperties注入兩個控制器都可以獨立存取和修改共享資料。

綁定到共享值

除了存取共享值之外,還可以綁定到它們在控制器的範圍內。要保留綁定引用,建議綁定到物件的屬性而不是原始類型。

1

2

3

4

5

6

7

var property = { Property1: 'First' };

 

// Binded to a static copy in Ctrl1

$scope.prop11 = property.Property1;

 

// Binded to the shared value in Ctrl2

$scope.prop12 = sharedProperties.getProperty().Property1;

登入後複製

以上是AngularJS 控制器如何在沒有巢狀的情況下進行通訊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板