AngularJS와 레거시 코드 인터페이스

AngularJS를 레거시 애플리케이션과 통합하면 Angular 프레임워크와 상호작용해야 하는 외부 콜백으로 인해 문제가 발생할 수 있습니다. . 이 문제를 해결하기 위해 AngularJS는 상호 운용성을 위한 여러 가지 메커니즘을 제공합니다.

외부 코드에서 Angular 서비스 액세스

한 가지 접근 방식은 AngularJS 서비스를 생성하고 setter 메서드를 노출하여 서비스를 업데이트하는 것입니다. 데이터. 그런 다음 레거시 코드는 AngularJS의 외부 인터페이스 개체를 통해 이러한 메서드를 호출할 수 있습니다. 서비스 내에서 setter 함수는 Angular 이벤트 버스를 사용하여 이벤트를 트리거해야 합니다.

컨트롤러의 서비스에서 이벤트 캡처

컨트롤러는 서비스에서 발생하는 이벤트를 구독할 수 있습니다. 이를 수행하려면 먼저 서비스에서 이벤트 이름을 정의하십시오. 컨트롤러에서 $scope.$on() 메서드를 사용하여 관련 이름의 이벤트를 포착하고 필요한 UI 업데이트를 수행하는 이벤트 리스너를 등록합니다.

제한 사항

AngularJS 외부에서 서비스 데이터를 직접 업데이트한다고 해서 항상 뷰에서 업데이트가 실행되는 것은 아니라는 점에 유의하는 것이 중요합니다. 이는 AngularJS가 단방향 데이터 바인딩 메커니즘을 사용하기 때문입니다. 업데이트가 뷰에 반영되도록 하려면 범위의 모든 데이터 변경 사항이나 메서드 호출을 AngularJS의 $apply() 함수로 래핑해야 합니다.

예

다음 코드 조각은 AngularJS에서 서비스를 설정하고 레거시 AS3 애플리케이션에서 서비스에 액세스하는 방법을 보여줍니다.

angular.module('myApp').service('myService', function () {
  this.data = [];

  this.setData = function (data) {
    this.data.push(data);
    this.$emit('dataUpdated', data);
  };
});

// in legacy AS3 code
ExternalInterface.call("myService.setData", data);

AngularJS 컨트롤러에서:

$scope.$on('dataUpdated', function (event, data) {
  // update the UI with the received data
});