AngularJS 與遺留程式碼的介面

由於需要與Angular 框架互動的外部回調，將AngularJS 與遺留應用程式整合可能會帶來挑戰。為了解決這個問題，AngularJS 提供了幾種互通性機制。

從外部程式碼存取 Angular 服務

一種方法是建立 AngularJS 服務並公開 setter 方法來更新其資料。然後，遺留程式碼可以透過 AngularJS 的ExternalInterface 物件呼叫這些方法。在服務中，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
});