如何在 AngularJS 控制器之間共用變數？

在AngularJS 控制器之間共享變數

理解問題

在AngularJS 中，控制器是獨立的作用域，這意味著它們無法直接存取變數在其他控制器中聲明。在多個控制器之間共享資料時，這可能會帶來挑戰。

基於服務的方法

此問題的一個常見解決方案是使用服務。服務在應用程式之間共享，並且可以注入到任何控制器中。他們負責保存和管理要共享的資料。

範例服務：

angular.module('myApp')
  .service('sharedProperties', function () {
    var property = 'First';

    return {
      getProperty: function () {
        return property;
      },
      setProperty: function (value) {
        property = value;
      }
    };
  });

控制器中的使用：

function Ctrl2($scope, sharedProperties) {
  $scope.prop2 = "Second";
  $scope.both = sharedProperties.getProperty() + $scope.prop2;
}

將資料綁定到共享物件

有時，將資料綁定到服務中物件的屬性可能很有用。這可確保對物件的變更傳播到與其綁定的 UI 元件。

包含物件的範例服務：

angular.module('myApp')
  .service('sharedProperties', function () {
    var property = {
      Property1: 'First'
    };

    return {
      getProperty: function () {
        return property.Property1;
      },
      setProperty: function (value) {
        property.Property1 = value;
      }
    };
  });

控制器中的用法：

function Ctrl2($scope, sharedProperties) {
  $scope.prop2 = "Second";
  $scope.both = sharedProperties.getProperty() + $scope.prop2;
  sharedProperties.setProperty($scope.both); // Update service property when UI changes
}

透過利用服務並將資料綁定到對象，您可以有效地共享變數AngularJS 控制器之間並保持整個應用程式中的資料一致性。

以上是如何在 AngularJS 控制器之間共用變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！