Cara Mengantara AngularJS dengan Kod Warisan

Mengantaramukakan AngularJS dengan Kod Warisan

Mengintegrasikan AngularJS dengan aplikasi lama boleh memberikan cabaran disebabkan panggilan balik luaran yang perlu berinteraksi dengan rangka kerja Angular . Untuk menangani perkara ini, AngularJS menyediakan beberapa mekanisme untuk saling kendali.

Mengakses Perkhidmatan Sudut daripada Kod Luaran

Satu pendekatan adalah untuk mencipta perkhidmatan AngularJS dan mendedahkan kaedah penetap untuk mengemas kininya data. Kod warisan kemudiannya boleh memanggil kaedah ini melalui objek ExternalInterface AngularJS. Dalam perkhidmatan, fungsi setter harus mencetuskan acara menggunakan bas acara Sudut.

Merakam Acara daripada Perkhidmatan dalam Pengawal

Pengawal boleh melanggan acara yang dipancarkan oleh perkhidmatan. Untuk melakukan ini, mula-mula tentukan nama acara dalam perkhidmatan. Dalam pengawal, gunakan kaedah $scope.$on() untuk mendaftarkan pendengar acara yang akan menangkap acara dengan nama yang berkaitan dan melaksanakan sebarang kemas kini UI yang diperlukan.

Penghadan

Perlu ambil perhatian bahawa kemas kini terus kepada data perkhidmatan dari luar AngularJS mungkin tidak sentiasa mencetuskan kemas kini dalam paparan. Ini kerana AngularJS menggunakan mekanisme pengikatan data sehala. Untuk memastikan kemas kini ditunjukkan dalam paparan, sebarang perubahan data atau permohonan kaedah pada skop hendaklah dibalut dalam fungsi $apply() AngularJS.

Contoh

Yang berikut coretan kod menunjukkan cara menyediakan perkhidmatan dalam AngularJS dan mengaksesnya daripada aplikasi AS3 warisan:

<code class="javascript">angular.module('myApp').service('myService', function () {
  this.data = [];

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

<code class="as3">// in legacy AS3 code
ExternalInterface.call("myService.setData", data);</code>

Dalam pengawal AngularJS:

<code class="javascript">$scope.$on('dataUpdated', function (event, data) {
  // update the UI with the received data
});</code>

Atas ialah kandungan terperinci Cara Mengantara AngularJS dengan Kod Warisan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!