Tôi biết đây là một câu hỏi cũ nhưng tôi đã xem xét các lựa chọn để làm điều này gần đây, vì vậy tôi nghĩ rằng tôi đã đặt những phát hiện của mình ở đây trong trường hợp nó hữu ích cho bất cứ ai.
Trong hầu hết các trường hợp, nếu có nhu cầu mã kế thừa bên ngoài để tương tác với trạng thái của giao diện người dùng hoặc hoạt động bên trong của ứng dụng, một dịch vụ có thể hữu ích để loại bỏ những thay đổi đó. Nếu một mã bên ngoài đang tương tác trực tiếp với bộ điều khiển góc, thành phần hoặc chỉ thị của bạn, thì bạn đang ghép ứng dụng của bạn rất nhiều với mã kế thừa của bạn, đó là tin xấu.
Những gì tôi đã kết thúc bằng cách sử dụng trong trường hợp của mình, là sự kết hợp giữa các trình duyệt toàn cầu có thể truy cập (tức là cửa sổ) và xử lý sự kiện. Mã của tôi có một công cụ tạo biểu mẫu thông minh yêu cầu đầu ra JSON từ CMS để khởi tạo các biểu mẫu. Đây là những gì tôi đã làm:
function FormSchemaService(DOM) {
var conf = DOM.conf;
// This event is the point of integration from Legacy Code
DOM.addEventListener('register-schema', function (e) {
registerSchema(DOM.conf);
}, false);
// service logic continues ....
Dịch vụ Schema Form được tạo bằng cách sử dụng kim phun góc như mong đợi:
angular.module('myApp.services').
service('FormSchemaService', ['$window' , FormSchemaService ])
Và trong bộ điều khiển của tôi: function () {'sử dụng nghiêm ngặt';
angular.module('myApp').controller('MyController', MyController);
MyEncapsulatorController.$inject = ['$scope', 'FormSchemaService'];
function MyController($scope, formSchemaService) {
// using the already configured formSchemaService
formSchemaService.buildForm();
Cho đến nay đây là lập trình hướng dịch vụ góc cạnh và javascript thuần túy. Nhưng sự tích hợp di sản đến đây:
<script type="text/javascript">
(function(app){
var conf = app.conf = {
'fields': {
'field1: { // field configuration }
}
} ;
app.dispatchEvent(new Event('register-schema'));
})(window);
</script>
Rõ ràng mọi cách tiếp cận đều có ưu điểm và nhược điểm. Những lợi thế và việc sử dụng phương pháp này phụ thuộc vào giao diện người dùng của bạn. Các cách tiếp cận được đề xuất trước đây không hoạt động trong trường hợp của tôi vì lược đồ biểu mẫu và mã kế thừa của tôi không có quyền kiểm soát và kiến thức về phạm vi góc. Do đó, việc định cấu hình ứng dụng của tôi dựa trên angular.element('element-X').scope();
có khả năng phá vỡ ứng dụng nếu chúng ta thay đổi phạm vi xung quanh. Nhưng nếu ứng dụng của bạn có kiến thức về phạm vi và có thể dựa vào nó không thay đổi thường xuyên, những gì được đề xuất trước đây là một cách tiếp cận khả thi.
Hi vọng điêu nay co ich. Bất kỳ thông tin phản hồi cũng được chào đón.
var injector = angular.injector(['ng', 'MyApp']);. Làm điều này sẽ cung cấp cho bạn một bối cảnh hoàn toàn mới và một bản saomyService. Điều đó có nghĩa là bạn sẽ kết thúc với hai phiên bản của dịch vụ và mô hình và sẽ thêm dữ liệu vào sai địa điểm. Thay vào đó, bạn nên nhắm mục tiêu một yếu tố trong ứng dụngangular.element('#ng-app').injector(['ng', 'MyApp']). Tại thời điểm này, bạn có thể sử dụng $ áp dụng để bọc các thay đổi mô hình.