Aufruf eine AngularJS Funktion von außerhalb des Geltungsbereichs eines Angular App

Question

Ich habe viele Fragen zu diesem Thema im Zusammenhang gesehen, aber keine Lösung, die ich versucht habe, funktioniert:

im Ordner public ich eine Datei namens app Js, wo ich meine AngularJS Anwendung wie folgt definieren:

var app = angular.module('app', []); 
var RectangleDim=30; 

app.controller('MainCtrl', function($scope, $http) { 

und am Ende der Datei muss ich den Bootstrap wie:

angular.bootstrap(document.getElementById('body'), ["app"]); 

Dann im gleichen Ordner und innen t er HTML mein Einstiegspunkt für die Anwendung von AngularJS ist wie folgt:

<div id="body"> 
<div ng-controller="MainCtrl"> 
    <div class="col-sm-6 col-md-6 col-lg-6" style="background-color: #D2D7D3"> 

     <div style="padding:25px;"> 

Dann auf einem anderen Ordner, ich habe eine andere JS-Datei, wo ich anrufen müssen, um eine bestimmte Funktion, die in dem AngularJS Code definiert ist. Die Funktion heißt Draw() und wird ausgelöst, wenn ich auf eine AngularJS-Taste klicke.

einfach Um die Funktion innerhalb einer anderen Datei aufrufen auf eine beliebige Taste, ohne klicken ich so etwas wie dies tue:

 var e = document.getElementById('body'); 
     var 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.Draw(NumQuest); 
     }); 
     //fim 

EDIT: Um meine Frage etwas klarer zu machen, habe ich vielleicht ein hinzufügen einige weitere Details:

Ich brauche nur einen Controller und ein einzelnes Modul, das meine gesamte Anwendung steuert, weil alle erforderlichen Aktionen (die 3 Funktionen aufrufen, die ein SVG-Bild aktualisieren) relativ in sich abgeschlossen sind. Ich denke, es besteht die Notwendigkeit, dem clientseitigen Code Komplexität hinzuzufügen, die nur verwirren könnte Ich und andere Leute, die mit mir arbeiten.

zu erinnern, was ich brauche:

Innerhalb einer einzigen Anwendung, mit einem Controller, I eine Funktion haben, Draw (someInputValue), dass eine SVG-Figur erzeugt. Die Eingabe für diese Funktion wird von einem Texteingabefeld empfangen.

In einer anderen Datei habe ich JS-Aktionen, die ausgeführt werden, wenn ich auf ein anderes Textfeld klicke (z. B. eine Warnung anzeigen oder ein zusätzliches Textfeld erstellen). Ich möchte einen Aufruf von Draw (Eingabe) verbinden, wenn ich auf das Textfeld klicke.

Ich möchte nämlich das Verhalten simulieren, das ich habe, wenn ich auf eine Schaltfläche klicke, die eine Zahl aus einem Textfeld liest und einige Aktionen ausführt, statt die Eingabe per Hand in ein Textfeld einzugeben und zu klicken auf eine Schaltfläche möchte ich einfach auf ein Textfeld klicken und die gleiche Aktion ausführen.

Answer 1

In diesem Fall möchten Sie vielleicht $ Sendung verwenden, um Ihre Nachrichten/Daten-Relais, und verwenden Sie $ auf die Aktion auszuführen.

Diese Praxis sollte jedoch begrenzt sein und mit Bedacht verwendet werden, um sicherzustellen, dass Sie keinen spürbaren Leistungsabfall auf der Straße haben.

Working with $scope.$emit and $scope.$on

Answer 2

Ich glaube, die Understanding Angular’s $scope and $rootScope event system $emit, $broadcast and $on kann dabei helfen.

Wie Sie sehen können, wenn Sie $scope.$emit verwenden, wird es ein Ereignis bis zu $scope auslösen und seit dem, wenn Sie $scope.$broadcast verwenden, wird das Ereignis abfeuern.

Schließlich mit $scope.$on ist, wie Sie auf diese Ereignisse hören werden.

Wie Sie besser mit dem nächsten Beispiel verstehen:

// firing an event upwards 
$scope.$emit('myCustomEvent', 'Data to send'); 

// firing an event downwards 
$scope.$broadcast('myCustomEvent', { 
    someProp: 'Sending you an Object!' // send whatever you want 
}); 

// listen for the event in the relevant $scope 
$scope.$on('myCustomEvent', function (event, data) { 
    console.log(data); // 'Data to send' 
}); 

Answer 3

HTML

<div id="YourElementId" ng-app='MyModule' ng-controller="MyController"> 
    Hi 
</div> 

JS-Code

angular.module('MyModule', []) 
    .controller('MyController', function ($scope) { 
    $scope.myfunction = function (data) { 
     alert("---" + data); 
    }; 
}); 

window.onload = function() { 
    angular.element(document.getElementById('YourElementId')).scope().myfunction('test'); 
}