Wie kann ich die unter Controller definierte Funktion von jedem Ort der Webseite (außerhalb der Controller-Komponente) aufrufen?
Es funktioniert perfekt, wenn ich die Taste "get" drücke. Aber ich muss es von außerhalb des Div-Controllers aufrufen. Die Logik ist: Standardmäßig ist mein Div versteckt. Irgendwo im Navigationsmenü drücke ich eine Taste und sie sollte () mein div anzeigen und die Funktion "get" ausführen. Wie kann ich das erreichen?
Meine Webseite ist:
<div ng-controller="MyController">
<input type="text" ng-model="data.firstname" required>
<input type='text' ng-model="data.lastname" required>
<form ng-submit="update()"><input type="submit" value="update"></form>
<form ng-submit="get()"><input type="submit" value="get"></form>
</div>
Mein js:
function MyController($scope) {
// default data and structure
$scope.data = {
"firstname" : "Nicolas",
"lastname" : "Cage"
};
$scope.get = function() {
$.ajax({
url: "/php/get_data.php?",
type: "POST",
timeout: 10000, // 10 seconds for getting result, otherwise error.
error:function() { alert("Temporary error. Please try again...");},
complete: function(){ $.unblockUI();},
beforeSend: function(){ $.blockUI()},
success: function(data){
json_answer = eval('(' + data + ')');
if (json_answer){
$scope.$apply(function () {
$scope.data = json_answer;
});
}
}
});
};
$scope.update = function() {
$.ajax({
url: "/php/update_data.php?",
type: "POST",
data: $scope.data,
timeout: 10000, // 10 seconds for getting result, otherwise error.
error:function() { alert("Temporary error. Please try again...");},
complete: function(){ $.unblockUI();},
beforeSend: function(){ $.blockUI()},
success: function(data){ }
});
};
}
get()
MyController von einem anderen Controller aus aufrufen möchten?Antworten:
Hier ist eine Möglichkeit, die Funktion des Controllers von außerhalb aufzurufen:
Wo
get()
ist eine Funktion von Ihrem Controller.Sie können wechseln
zu
Wenn Sie jQuery verwenden.
Wenn Ihre Funktion bedeutet, dass Sie etwas in Ihrer Ansicht ändern, sollten Sie aufrufen
um die Änderungen anzuwenden.
Eine weitere Sache, die Sie beachten sollten, ist, dass Bereiche nach dem Laden der Seite initialisiert werden. Daher sollten Methoden von außerhalb des Bereichs immer nach dem Laden der Seite aufgerufen werden. Andernfalls gelangen Sie überhaupt nicht zum Anwendungsbereich.
AKTUALISIEREN:
Mit den neuesten Versionen von Angular sollten Sie verwenden
Und ja, das ist in der Tat eine schlechte Praxis , aber manchmal muss man einfach Dinge schnell und schmutzig erledigen.
quelle
$apply
Teil nicht für mich arbeiten lassen, bis ich den Code in eine Funktion eingewickelt hatte, zB..scope.$apply(function() { scope.get() });
angular.element(document.getElementById('yourControllerElementID')).scope().controller;
For zum Beispiel auf den Controller zugreifen . if use:angular.element(document.getElementById('controller')).scope().get()
wirft und undefinierten Fehler, aber wenn ich es benutzeangular.element(document.getElementById('controller')).scope().controller.get()
, funktioniert es.scope()
in dasangular.element(...)
, weil es und ein vardump des Winkelelement / Objekt nicht definiert Rückgabe sagt , dass die Funktionscope
in der Lage ist__proto__
-Objekt.Ich habe ein Beispiel im Internet gefunden.
Ein Typ hat diesen Code geschrieben und perfekt funktioniert
HTML
JAVASCRIPT
Demo
* Ich habe einige Änderungen vorgenommen, siehe Original: font JSfiddle
quelle
Die Lösung
angular.element(document.getElementById('ID')).scope().get()
hat in Winkel 1.5.2 für mich nicht mehr funktioniert. Sombody erwähnt in einem Kommentar, dass dies auch in 1.4.9 nicht funktioniert. Ich habe es behoben, indem ich den Bereich in einer globalen Variablen gespeichert habe:Aufruf vom benutzerdefinierten Code:
Wenn Sie den Bereich nur auf diese Methode beschränken möchten. Minimierung der Exposition des gesamten Anwendungsbereichs. Verwenden Sie die folgende Technik.
Aufruf vom benutzerdefinierten Code:
quelle
Dmitrys Antwort funktioniert gut. Ich habe gerade ein einfaches Beispiel mit der gleichen Technik gemacht.
jsfiddle: http://jsfiddle.net/o895a8n8/5/
.
quelle
Ich würde die Factory lieber als Abhängigkeiten von den Controllern einschließen, als ihnen eine eigene Codezeile hinzuzufügen : http://jsfiddle.net/XqDxG/550/
ControllerZero. $ Inject = ['$ scope', 'mySharedService'];quelle
Es kann eine Überlegung wert sein, ob ein Menü ohne zugehörigen Bereich der richtige Weg ist. Es ist nicht wirklich der eckige Weg.
Wenn Sie dies jedoch tun müssen, können Sie dies tun, indem Sie die Funktionen zu $ rootScope hinzufügen und dann innerhalb dieser Funktionen $ Broadcast zum Senden von Ereignissen verwenden. Ihr Controller verwendet dann $ on, um auf diese Ereignisse zu warten.
Eine andere Sache, die Sie berücksichtigen sollten, wenn Sie Ihr Menü ohne Bereich haben, ist, dass, wenn Sie mehrere Routen haben, alle Ihre Controller ihre eigene Aktualisierung haben und Funktionen erhalten müssen. (Dies setzt voraus, dass Sie mehrere Controller haben)
quelle
Ich arbeite mit $ http, wenn ich Informationen von einer Ressource erhalten möchte, gehe ich wie folgt vor:
Und der Code in der Steuerung:
Ich sende an den Dienst, welche Funktion in der Steuerung aufgerufen werden muss
quelle
Ich habe mehrere Routen und mehrere Controller, sodass ich die akzeptierte Antwort nicht zum Laufen bringen konnte. Ich fand, dass das Hinzufügen der Funktion zum Fenster funktioniert:
Dann kann dies außerhalb des Controllers durchgeführt werden:
quelle
Rufen Sie die Angular Scope-Funktion von außerhalb des Controllers auf.
quelle
Ich bin ein Ionic-Framework-Benutzer und derjenige, den ich gefunden habe, der den $ -Bereich des aktuellen Controllers konsistent bereitstellt, ist:
angular.element(document.querySelector('ion-view[nav-view="active"]')).scope()
Ich vermute, dass dies geändert werden kann, um den meisten Szenarien unabhängig vom Framework (oder nicht) zu entsprechen, indem die Abfrage gefunden wird, die auf die spezifischen DOM-Elemente abzielt, die nur während einer bestimmten Controller-Instanz verfügbar sind.
quelle