2017-07-23 3 views
0

I Angular 1.5 bin mit und ich habe eine Komponente wie dieseWie aus Komponente-Controller für den Zugriff außerhalb

 angular 
     .module('appliactionModule') 
     .component('umleditor', { 
      bindings: { 
       ... 
      }, 
      templateUrl: 'app/uml-editor/umleditor.html', 
      controller: UmlEditorController 
     }); 

     function UmlEditorController(...){ ... }; 

Dann in app/uml-editor/umleditor.html würde ich den Controller einige Javascript Lage UmlEditorController wie diese haben gerne zugreifen:

<div class="editor-wrapper" id="editor"> 
    ... 
    <script> 
    // Accessing Services like this works 
    var FooService = angular.element('*[ng-app]').injector().get("FooService"); 

    // How do I get the controller? 
     controller.doSomething(); 

    </script> 
</div> 

Wie bekomme ich einen Verweis auf meinen Controller von außen, so dass ich es von regulärem JavaScript (nicht Angular) verwenden kann?

angular.element(document.getElementById("editor")).controller('umleditor'); 

Oder

angular.element(document.getElementById("editor")).isolateScope().$ctrl; 

Dies ist eine schlechte Praxis und sollte bei der Prüfung oder als eine schnelle Lösung verwendet werden:

+0

_Einfach ist besser als komplex_. Verwenden Sie stattdessen Winkelservice – hadi

+0

Sie möchten auf die Controller-Instanz oder den Bereich zugreifen? (Es klingt, als ob Sie versuchen, auf den Bereich für den vorhandenen Code zuzugreifen) –

+0

Ja, es war ein alter Code, der abgeschnitten wurde. Ich werde das ändern. Ich würde gerne auf den Controller zugreifen, aber wenn nur der Umfang zugänglich ist, könnte ich vielleicht irgendwie eine Abhilfe schaffen. – sockeqwe

Antwort

0

Da gibt es umleditor Komponente, Controller-Instanz kann mit abgerufen werden. Im Allgemeinen ist das Gegenteil zu tun, externe JS-Code sollte mit Angular App verpackt werden.

+0

Danke für Ihre Antwort. Leider funktioniert es mit keiner dieser Optionen. Sie kommen immer 'undefiniert' zurück. Ich nehme an, dass die ID für 'document.getElementById (" editor ")' auf das falsche Element gesetzt wird. Ich habe die ID zu meinem root html Element in meiner 'app/uml-editor/umleditor.html' Datei hinzugefügt, wie oben in meiner Frage beschrieben. Ist das falsch? – sockeqwe

+0

Sie können es in der Konsole debuggen, um zu überprüfen, ob es das richtige ist. Das Element existiert möglicherweise nicht in dem Moment, in dem Sie diesen Code ausführen. Wenn Sie die Anwendung nicht mit etwas wie "gulp-angular-templatecache" bündeln, wird die Vorlage asynchron geladen und das Element kann jederzeit angezeigt werden. Dies ist einer von vielen Gründen, warum es eine schlechte Übung ist. – estus

Verwandte Themen