AngularJS 컨트롤러는 중첩 없이 어떻게 통신할 수 있나요?

Angular 컨트롤러 간 통신

AngularJS에서는 컨트롤러 간 통신을 촉진하는 것이 필요한 경우가 많습니다. 그러나 컨트롤러가 중첩되지 않은 경우 다른 컨트롤러 내의 한 컨트롤러에서 변수에 액세스하는 것은 문제가 됩니다.

상속 없이 변수 전달

첫 번째 컨트롤러(Ctrl1)를 $scope를 사용하여 두 번째 컨트롤러(Ctrl2)에 인수를 추가하면 정의되지 않은 오류로 인해 Ctrl1을 실행할 수 없습니다. 마찬가지로 Ctrl2.prototype = new Ctrl1();을 사용하여 Ctrl1에서 Ctrl2로 속성을 상속합니다. 역시 실패합니다.

해결책: 서비스 활용

중첩하지 않고 컨트롤러 간에 변수를 공유하려면 효과적인 솔루션은 서비스를 생성하여 모든 관련 컨트롤러에 주입하는 것입니다. 서비스는 기능을 공유하기 위해 여러 컨트롤러 또는 지시문에 삽입할 수 있는 Angular 구성 요소입니다.

서비스 예:

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('New First');
}

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

주입하여 sharedProperties 서비스를 두 컨트롤러 모두에 적용하면 공유 데이터에 독립적으로 액세스하고 수정할 수 있습니다.

공유 값에 바인딩

공유 값에 액세스하는 것 외에도 다음 작업도 가능합니다. 컨트롤러의 범위에서 바인딩합니다. 바인딩된 참조를 유지하려면 기본 유형 대신 객체의 속성에 바인딩하는 것이 좋습니다.

var property = { Property1: 'First' };

// Binded to a static copy in Ctrl1
$scope.prop11 = property.Property1;

// Binded to the shared value in Ctrl2
$scope.prop12 = sharedProperties.getProperty().Property1;

위 내용은 AngularJS 컨트롤러는 중첩 없이 어떻게 통신할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!