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

AngularJS 컨트롤러 간 변수 전달

AngularJS에서는 컨트롤러 간 데이터 흐름을 관리하는 것이 어려울 수 있으며, 특히 컨트롤러가 중첩되지 않은 경우 더욱 그렇습니다. 컨트롤러 간 변수 공유를 달성하는 방법은 다음과 같습니다.

서비스 사용

서비스는 구성 요소 간에 데이터를 공유하는 강력한 방법입니다. 서비스를 생성하고 공유 변수에 액세스해야 하는 컨트롤러에 이를 삽입합니다.

angular.module('myApp')
    .service('sharedProperties', function () {
        var property1 = 'First';
        
        return {
            getProperty1: function () {
                return property1;
            },
            setProperty1: function(value) {
                property1 = value;
            }
        };
    });

컨트롤러에서 서비스를 삽입하고 해당 메서드를 사용하여 공유 변수에 액세스하고 수정합니다.

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

공유 값에 바인딩

컨트롤러 간 공유 값을 실시간으로 업데이트하려면 기본 유형 대신 개체의 속성에 바인딩할 수 있습니다.

angular.module('myApp')
    .service('sharedProperties', function () {
        return {
            property1: { Property1: 'First' }
        };
    });

컨트롤러에서 기본 값 대신 개체의 속성에 바인딩하세요.

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

팁 :

• 객체 속성에 바인딩할 때 객체 자체가 업데이트되어 데이터를 트리거하는지 확인하세요. 바인딩.
• 정의되지 않은 참조로 이어질 수 있으므로 한 컨트롤러에서 다른 컨트롤러로 직접 공유 변수에 액세스하지 마십시오.
• 서비스는 데이터 공유를 관리하고 분리된 설계를 시행하는 구조화되고 효율적인 방법을 제공합니다.

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