Ich habe dieses einfache Szenario:
Geben Sie ein Element ein, dessen Wert durch die val () -Methode von jQuery geändert wird.
Ich versuche, das Winkelmodell mit dem von jQuery festgelegten Wert zu aktualisieren. Ich habe versucht, eine einfache Anweisung zu schreiben, aber sie macht nicht das, was ich will.
Hier ist die Richtlinie:
var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
return function(scope, element, attrs) {
element.bind('change', function() {
console.log('value changed');
})
}
})
Dies ist der jQuery-Teil:
$(function(){
$('button').click(function(){
$('input').val('xxx');
})
})
und html:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input test-change ng-model="foo" />
<span>{{foo}}</span>
</div>
</div>
<button>clickme</button>
Hier ist die Geige mit meinem Versuch:
http://jsfiddle.net/U3pVM/743/
Kann mich bitte jemand in die richtige Richtung weisen?
Antworten:
ngModel wartet auf das Ereignis "Eingabe". Um Ihren Code zu "reparieren", müssen Sie dieses Ereignis auslösen, nachdem Sie den Wert festgelegt haben:
Zur Erklärung dieses speziellen Verhaltens lesen Sie die Antwort, die ich vor einiger Zeit gegeben habe: " Wie fängt AngularJS intern Ereignisse wie 'onclick', 'onchange' ab? "
Leider ist dies nicht das einzige Problem, das Sie haben. Wie bereits in anderen Kommentaren erwähnt, ist Ihr jQuery-zentrierter Ansatz eindeutig falsch. Weitere Informationen finden Sie in diesem Beitrag: Wie denke ich in AngularJS, wenn ich einen jQuery-Hintergrund habe? ).
quelle
input
Ereignis im IE einschließlich IE11 nicht.input
Ereignis funktioniert nur, wenn$sniff.hasEvent('input')
es wahr ist, aber$sniff.hasEvent('input')
auch unter IE11 falsch! Wir können stattdessenchange
event verwenden.Hoffe das ist nützlich für jemanden.
Ich konnte das
jQuery('#myInputElement').trigger('input')
Ereignis nicht in meine eckige App aufnehmen.Ich konnte jedoch
angular.element(jQuery('#myInputElement')).triggerHandler('input')
abgeholt werden.quelle
angular.element($('#myInputElement')).triggerHandler('input')
Die akzeptierte Antwort, die ein
input
Ereignis mit jQuery auslöste, funktionierte bei mir nicht. Das Erstellen eines Ereignisses und das Versenden mit nativem JavaScript haben den Trick getan.quelle
Ich denke nicht, dass jQuery hier erforderlich ist.
Sie können stattdessen $ watch und ng-click verwenden
In Ihrem Controller:
quelle
Sie müssen den folgenden Code verwenden, um den Umfang des spezifischen Eingabemodells wie folgt zu aktualisieren
quelle
var scope = angular.element($("select")).scope(); scope.$apply(function(){ scope.selectValue = newVal; });
Dieser Teil hat mir sehr geholfen. Mein Problem bestand darin, ein Winkelmodell nach einem jquery ajax-Aufruf in der Erfolgsfunktion zu aktualisieren. Mit $ http war es langsam, weil es einen doppelten Listener für Änderungsereignisse für das Element gab, das etwas anderes tat, also habe ich es in jQuery zusammengeführt.$compileProvider.debugInfoEnabled(false);
oder deaktivieren. Weitere Informationen finden$logProvider.debugEnabled(false);
Sie unter code.angularjs.org/1.4.0/docs/guide/production .Ich habe Änderungen nur an der Controller-Initialisierung vorgenommen, indem ich den Listener auf der Aktionstaste hinzugefügt habe:
Andere Lösungen haben in meinem Fall nicht funktioniert.
quelle
Ich weiß, dass es etwas spät ist, hier zu antworten, aber vielleicht kann ich einmal am Tag etwas sparen.
Ich habe mich mit dem gleichen Problem befasst. Ein Modell wird nicht gefüllt, sobald Sie den Wert der Eingabe von jQuery aktualisieren. Ich habe versucht, Trigger-Ereignisse zu verwenden, aber kein Ergebnis.
Hier ist, was ich getan habe, um Ihren Tag zu retten.
Deklarieren Sie eine Variable in Ihrem Skript-Tag in HTML.
Mögen:
Sobald Sie dies getan haben, verwenden Sie den folgenden Service von Angular.
Die folgende getData-Funktion, die vom selben Controller-Bereich aufgerufen wird, gibt Ihnen den gewünschten Wert.
quelle
Ich habe dieses kleine Plugin für jQuery geschrieben, das alle Aufrufe zum
.val(value)
Aktualisieren des Winkelelements ausführt, falls vorhanden:Fügen Sie dieses Skript einfach nach jQuery und angular.js ein, und
val(value)
Updates sollten jetzt gut funktionieren .Minimierte Version:
Beispiel:
Code-Snippet anzeigen
quelle
Wenn Sie IE verwenden, müssen Sie Folgendes verwenden: input.trigger ("change");
quelle
.change()
nach dem Einstellen des Wertes hinzufügen .Beispiel:
('id').val.('value').change();
Vergessen Sie auch nicht, HTML hinzuzufügen
onchange
oder zung-change
markierenquelle
Ich habe dies getan, um den Wert von ngModel von außen mit Vanilla / jQuery aktualisieren zu können:
quelle