How Can I Share Variables Between AngularJS Controllers?

Sharing Variables Between AngularJS Controllers

Understanding the Issue

In AngularJS, controllers are isolated scopes, which means they do not have direct access to variables declared in other controllers. This can present a challenge when sharing data among multiple controllers.

Service-Based Approach

One common solution to this problem is to use a service. Services are shared across the application and can be injected into any controller. They are responsible for holding and managing the data to be shared.

Example Service:

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

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

Usage in Controller:

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

Binding Data to a Shared Object

Sometimes, it can be useful to bind data to an object's property within a service. This ensures that changes to the object are propagated to the UI components bound to it.

Example Service with Object:

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

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

Usage in Controller:

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

By leveraging services and binding data to objects, you can effectively share variables between AngularJS controllers and maintain data consistency throughout your application.

The above is the detailed content of How Can I Share Variables Between AngularJS Controllers?. For more information, please follow other related articles on the PHP Chinese website!