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 중국어 웹사이트의 기타 관련 기사를 참조하세요!