AngularJS 컨트롤러 간에 변수를 효과적으로 공유하려면 어떻게 해야 합니까?

AngularJS 컨트롤러 간 변수 공유

AngularJS 애플리케이션에서는 통신 및 데이터 공유를 용이하게 하기 위해 컨트롤러 간에 변수를 전달해야 하는 경우가 많습니다. 그러나 다른 컨트롤러에서 변수에 액세스하는 것은 어려울 수 있습니다.

기존 접근 방식

이상적인 시나리오에서는 다른 컨트롤러에서 직접 변수에 액세스하려고 시도할 수도 있습니다. 그러나 컨트롤러가 계층적 $scope 상속 모델을 통해 연결되어 있지 않으면 이 접근 방식은 실패합니다.

해결책: 서비스 사용

더 효과적인 솔루션은 모든 컨트롤러에서 공유되는 서비스를 활용하는 것입니다. 애플리케이션에 서비스를 등록하고 원하는 컨트롤러에 주입하면 해당 속성과 메서드에 액세스하여 데이터를 교환할 수 있습니다.

서비스 예:

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

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

컨트롤러에서의 사용법:

function Ctrl1($scope, sharedProperties) {
  sharedProperties.setProperty('Updated Value');
}

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

바인딩 속성에

공유 값이 UI를 동적으로 업데이트하도록 하려면 기본 유형이 아닌 객체의 속성에 바인딩하는 것을 고려하세요. 이를 통해 애플리케이션 전체에서 참조를 유지할 수 있습니다.

예:

// Replace 'var property = 'First';' with
var property = { Property1: 'First' };

추가 리소스

• [바인딩 변수 AngularJS](https://jasonwatmore.com/post/2014/08/14/AngularJS-bind-to-same-variable-in-multiple-scopes-controllers)

위 내용은 AngularJS 컨트롤러 간에 변수를 효과적으로 공유하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!