Ich weiß, dass dies eine alte Frage ist, aber ich habe kürzlich nach Optionen gesucht, um dies zu tun. Deshalb dachte ich, ich habe meine Ergebnisse hier veröffentlicht, falls es für jemanden nützlich ist.
In den meisten Fällen kann ein Dienst hilfreich sein, um diese Änderungen zu abstrahieren, wenn externer Legacy-Code für die Interaktion mit dem Status der Benutzeroberfläche oder dem Innenleben der Anwendung erforderlich ist. Wenn ein externer Code direkt mit Ihrem Winkelcontroller, Ihrer Komponente oder Ihrer Direktive interagiert, koppeln Sie Ihre App stark mit Ihrem Legacy-Code, was eine schlechte Nachricht ist.
Was ich in meinem Fall letztendlich verwendet habe, ist eine Kombination aus über den Browser zugänglichen Globals (dh Fenster) und Ereignisbehandlung. Mein Code verfügt über eine intelligente Formulargenerierungs-Engine, die eine JSON-Ausgabe von einem CMS erfordert, um die Formulare zu initiieren. Folgendes habe ich getan:
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 ....
Der Formularschemadienst wird erwartungsgemäß mit einem Winkelinjektor erstellt:
angular.module('myApp.services').
service('FormSchemaService', ['$window' , FormSchemaService ])
Und in meinen Controllern: function () {'use strict';
angular.module('myApp').controller('MyController', MyController);
MyEncapsulatorController.$inject = ['$scope', 'FormSchemaService'];
function MyController($scope, formSchemaService) {
// using the already configured formSchemaService
formSchemaService.buildForm();
Bisher ist dies eine reine eckige und Javascript-serviceorientierte Programmierung. Aber die Legacy-Integration kommt hierher:
<script type="text/javascript">
(function(app){
var conf = app.conf = {
'fields': {
'field1: { // field configuration }
}
} ;
app.dispatchEvent(new Event('register-schema'));
})(window);
</script>
Offensichtlich hat jeder Ansatz seine Vor- und Nachteile. Die Vorteile und die Verwendung dieses Ansatzes hängen von Ihrer Benutzeroberfläche ab. Die zuvor vorgeschlagenen Ansätze funktionieren in meinem Fall nicht, da mein Formularschema und mein Legacy-Code keine Kontrolle und keine Kenntnis der Winkelbereiche haben. Daher kann die Konfiguration meiner App basierend auf angular.element('element-X').scope();
möglicherweise die App beschädigen, wenn wir die Bereiche ändern. Wenn Ihre App jedoch Kenntnisse über den Umfang hat und sich darauf verlassen kann, dass sich diese nicht häufig ändern, wird zuvor ein praktikabler Ansatz vorgeschlagen.
Hoffe das hilft. Jedes Feedback ist ebenfalls willkommen.
var injector = angular.injector(['ng', 'MyApp']);. Auf diese Weise erhalten Sie einen völlig neuen Kontext und ein DuplikatmyService. Das bedeutet, dass Sie am Ende zwei Instanzen des Dienstes und des Modells haben und Daten an der falschen Stelle hinzufügen. Sie sollten stattdessen ein Element in der App mit auswählenangular.element('#ng-app').injector(['ng', 'MyApp']). An diesem Punkt können Sie dann $ apply verwenden, um Modelländerungen zu verpacken.