Appeler AngularJS à partir du code hérité

J'utilise AngularJS pour créer des contrôles HTML qui interagissent avec une application Flex héritée. Tous les rappels de l'application Flex doivent être attachés à la fenêtre DOM.

Par exemple (en AS3)

ExternalInterface.call("save", data);

Appellera

window.save = function(data){
    // want to update a service 
    // or dispatch an event here...
}

À partir de la fonction de redimensionnement JS, j'aimerais envoyer un événement qu'un contrôleur peut entendre. Il semble que la création d'un service soit la voie à suivre. Pouvez-vous mettre à jour un service depuis l'extérieur d'AngularJS? Un contrôleur peut-il écouter les événements d'un service? Dans une expérience (cliquez pour violon) j'ai fait, il semble que je puisse accéder à un service, mais la mise à jour des données du service ne se reflète pas dans la vue (dans l'exemple, un <option>devrait être ajouté au <select>).

Merci!

L'interopérabilité de l'extérieur d'angle à angulaire est identique au débogage d'une application angulaire ou à l'intégration avec une bibliothèque tierce.

Pour tout élément DOM, vous pouvez le faire:

• angular.element(domElement).scope() pour obtenir la portée actuelle de l'élément
• angular.element(domElement).injector() pour obtenir l'injecteur d'application actuel
• angular.element(domElement).controller()pour mettre la main sur l' ng-controllerinstance.

Depuis l'injecteur, vous pouvez accéder à n'importe quel service en application angulaire. De la même manière, à partir de la portée, vous pouvez invoquer toutes les méthodes qui y ont été publiées.

Gardez à l'esprit que toute modification du modèle angulaire ou toute invocation de méthode sur la portée doit être enveloppée $apply()comme suit:

$scope.$apply(function(){
  // perform any model changes or method invocations here on angular app.
});

Misko a donné la bonne réponse (évidemment), mais certains d'entre nous, les débutants, peuvent avoir besoin de la simplifier davantage.

Lorsqu'il s'agit d'appeler du code AngularJS à partir d'applications héritées, considérez le code AngularJS comme une «micro application» existant dans un conteneur protégé de votre application héritée. Vous ne pouvez pas lui faire d'appels directement (pour une très bonne raison), mais vous pouvez faire des appels à distance via l'objet $ scope.

Pour utiliser l'objet $ scope, vous devez obtenir le handle de $ scope. Heureusement, c'est très facile à faire.

Vous pouvez utiliser l'id de n'importe quel élément HTML dans votre HTML "micro-application" AngularJS pour obtenir le handle de l'application $ scope AngularJS.

À titre d'exemple, disons que nous voulons appeler quelques fonctions dans notre contrôleur AngularJS telles que sayHi () et sayBye (). Dans le HTML AngularJS (vue), nous avons un div avec l'id "MySuperAwesomeApp". Vous pouvez utiliser le code suivant, combiné avec jQuery pour obtenir le handle de $ scope:

var microappscope = angular.element($("#MySuperAwesomeApp")).scope();

Vous pouvez maintenant appeler vos fonctions de code AngularJS via le handle de portée:

// we are in legacy code land here...

microappscope.sayHi();

microappscope.sayBye();

Pour rendre les choses plus pratiques, vous pouvez utiliser une fonction pour saisir la poignée de la portée à chaque fois que vous souhaitez y accéder:

function microappscope(){

    return angular.element($("#MySuperAwesomeApp")).scope();

}

Vos appels ressembleraient alors à ceci:

microappscope().sayHi();

microappscope().sayBye();

Vous pouvez voir un exemple fonctionnel ici:

http://jsfiddle.net/peterdrinnan/2nPnB/16/

J'ai également montré cela dans un diaporama pour le groupe Ottawa AngularJS (passez simplement aux 2 dernières diapositives)

http://www.slideshare.net/peterdrinnan/angular-for-legacyapps

La plus grande explication du concept que j'ai trouvée se trouve ici: https://groups.google.com/forum/#!msg/angular/kqFrwiysgpA/eB9mNbQzcHwJ

Pour vous épargner le clic:

// get Angular scope from the known DOM element
e = document.getElementById('myAngularApp');
scope = angular.element(e).scope();
// update the model with a wrap in $apply(fn) which will refresh the view for us
scope.$apply(function() {
    scope.controllerMethod(val);
}); 

Suite aux autres réponses. Si vous ne souhaitez pas accéder à une méthode dans un contrôleur mais souhaitez accéder directement au service, vous pouvez faire quelque chose comme ceci:

// Angular code* :
var myService = function(){
    this.my_number = 9;
}
angular.module('myApp').service('myService', myService);


// External Legacy Code:
var external_access_to_my_service = angular.element('body').injector().get('myService');
var my_number = external_access_to_my_service.my_number 

Grâce au post précédent, je peux mettre à jour mon modèle avec un événement asynchrone.

<div id="control-panel" ng-controller="Filters">
    <ul>
        <li ng-repeat="filter in filters">
        <button type="submit" value="" class="filter_btn">{{filter.name}}</button>
        </li>
    </ul>
</div>

Je déclare mon modèle

function Filters($scope) {
    $scope.filters = [];
}

Et je mets à jour mon modèle hors de ma portée

ws.onmessage = function (evt) {
    dictt = JSON.parse(evt.data);
    angular.element(document.getElementById('control-panel')).scope().$apply(function(scope){
        scope.filters = dictt.filters;
    });
};

Un moyen plus sûr et plus performant, en particulier lorsque les données de débogage sont désactivées, consiste à utiliser une variable partagée pour contenir une fonction de rappel. Votre contrôleur angulaire implémente cette fonction pour renvoyer ses composants internes au code externe.

var sharedVar = {}
myModule.constant('mySharedVar', sharedVar)
mymodule.controller('MyCtrl', [ '$scope','mySharedVar', function( $scope, mySharedVar) {

var scopeToReturn = $scope;

$scope.$on('$destroy', function() {
        scopeToReturn = null;
    });

mySharedVar.accessScope = function() {
    return scopeToReturn;
}
}]);

Généralisée en tant que directive réutilisable:

J'ai créé une directive 'exposeScope' qui fonctionne de la même manière mais l'utilisation est plus simple:

<div ng-controller="myController" expose-scope="aVariableNameForThisScope">
   <span expose-scope='anotherVariableNameForTheSameScope" />
</div>

Cela stocke la portée actuelle (qui est donnée à la fonction de lien de la directive) dans un objet global «scopes» qui est un support pour toutes les portées. La valeur fournie à l'attribut de directive est utilisée comme nom de propriété de la portée dans cet objet global.

Voir la démo ici . Comme je l'ai montré dans la démo, vous pouvez déclencher des événements jQuery lorsque la portée est stockée et supprimée de l'objet global 'scopes'.

<script type="text/javascript" >
    $('div').on('scopeLinked', function(e, scopeName, scope, allScopes) {
      // access the scope variable or the given name or the global scopes object
    }.on('scopeDestroyed', function(e, scopeName, scope, allScopes) {
      // access the scope variable or the given name or the global scopes object
    }

</script>

Notez que je n'ai pas testé le on ('scopeDestroyed') lorsque l'élément réel est supprimé du DOM. Si cela ne fonctionne pas, déclencher l'événement sur le document lui-même au lieu de l'élément peut aider. (voir le script app.js) dans le plunker de démonstration.

Je sais que c'est une vieille question, mais je cherchais des options pour le faire récemment, alors j'ai pensé mettre mes conclusions ici au cas où cela serait utile à quiconque.

Dans la plupart des cas, s'il est nécessaire que du code hérité externe interagisse avec l'état de l'interface utilisateur ou le fonctionnement interne de l'application, un service peut être utile pour résumer ces modifications. Si un code externe interagit directement avec votre contrôleur angulaire, composant ou directive, vous associez fortement votre application à votre code hérité, ce qui est une mauvaise nouvelle.

Ce que j'ai fini par utiliser dans mon cas, c'est une combinaison de globaux accessibles par navigateur (ie fenêtre) et de gestion d'événements. Mon code a un moteur de génération de formulaires intelligent qui nécessite une sortie JSON d'un CMS pour initier les formulaires. Voici ce que j'ai fait:

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 ....

Le service de schéma de formulaire est créé à l'aide d'un injecteur angulaire comme prévu:

angular.module('myApp.services').
service('FormSchemaService', ['$window' , FormSchemaService ])

Et dans mes contrôleurs: function () {'use strict';

angular.module('myApp').controller('MyController', MyController);

MyEncapsulatorController.$inject = ['$scope', 'FormSchemaService'];

function MyController($scope, formSchemaService) {
    // using the already configured formSchemaService
    formSchemaService.buildForm(); 

Jusqu'à présent, il s'agit d'une programmation orientée service angulaire et javascript pure. Mais l'intégration héritée vient ici:

<script type="text/javascript">

   (function(app){
        var conf = app.conf = {
       'fields': {
          'field1: { // field configuration }
        }
     } ; 

     app.dispatchEvent(new Event('register-schema'));

 })(window);
</script>

De toute évidence, chaque approche a ses avantages et ses inconvénients. Les avantages et l'utilisation de cette approche dépendent de votre interface utilisateur. Les approches suggérées précédemment ne fonctionnent pas dans mon cas car mon schéma de formulaire et mon code hérité n'ont aucun contrôle et aucune connaissance des portées angulaires. Par conséquent, la configuration de mon application en fonction de angular.element('element-X').scope(); pourrait potentiellement casser l'application si nous changeons les portées autour. Mais si votre application connaît la portée et peut compter sur elle pour ne pas changer souvent, ce qui a été suggéré précédemment est une approche viable.

J'espère que cela t'aides. Tout commentaire est également le bienvenu.