Unterschied zwischen on-change-und ng-change

Unten ist eine ziemlich einfache setup für ein Formular-Dropdown-Liste. Jedoch, die on-change Veranstaltung weigert sich, zu feuern... es sei denn, es ist geändert ng-change.

Dieser hatte mir steckte für etwa eine Stunde, da wir das gleiche setup an anderer Stelle in unserer Website (d.h. Eigenschaft model/list/on-change - Richtlinie) ohne fehl.

Frage ich mich, was der Unterschied ist zwischen on-change und ng-change und warum arbeitet man in dieser Instanz und der andere nicht?

Ansicht

<select id="grArchive"
        name="grArchive"
        class="form-control"
        options="userList"
        ng-model="selectedUser"
        ng-options="user as user.name for user in userList"
        on-change="showSelected()">
</select>

Controller

scope.selectedUser = {};
scope.userList = [];

scope.showSelected = function(){
    scope.columns = addColumns;
};

var loadUserList = function(data){
    scope.userList = $.map(data, function(item){
            return {id: item.id, name: item.firstName + ' ' + item.lastName};
        });
}

Nur für den Fall: die Benutzer-drop-down-füllt als erwartet (Screenshot unten)

Unterschied zwischen on-change-und ng-change

InformationsquelleAutor NealR | 2016-07-14
  1. 3

    ng-change

    ng-change ist eine Richtlinie, die zur Verfügung gestellt von Winkel-Kern-API, die intern registriert einen Ausdruck aufgerufen werden, wenn jede änderung geschieht in $viewValue von ng-model variable (hier ist der code); weisen Sie ihm einen Ausdruck wie myFunction(). Das bereitgestellte Ausdruck wird ausgewertet im inneren der zugrunde liegende controller-Bereich. Nach dem Aufruf eines Ausdrucks wird ein digest-Zyklus, um sicherzustellen, dass die Bindungen werden aktualisiert die Ansicht. Neben ng-change gibt es andere Richtlinien für Veranstaltungen genutzt, wie ng-focus,ng-mousedown,ng-submit, ng-blur usw. Hier ist eine Liste von Richtlinien,

    on-change

    Es ist ein Weg, eine JavaScript-Funktion aufrufen, die auf change des input-Elements mit dem Wert. Sie werden Suche für die function Global verfügbar in den Kontext (offensichtlich, es wird nicht rufen Sie die Funktion registriert, die in eckigen controller) und bewerten Sie es.

    • Ist lustig, wie die Leute sagen 'alten Weg'. Das ist der neue Weg dann?
    • Oh, my bad, ich habe Sie nicht absichtlich, ich Entferne old Wort. 🙁
    • Never mind, es war nicht ein thougth.
    • github.com/angular/angular.js/blob/... es bindet nicht jede Veranstaltung selbst
    • Sie sind teilweise richtig, vielen Dank für das heads-up. Eigentlich andere Ereignisse werden behandelt, so Sprach ich, hier Sie sehen können.
    • Das, was ich sagte, teilweise, weil, Wenn man sieht, wie $viewChangeListner rufen Sie die registrierten listner, dann werden Sie verstehen, indirekt fordert der register-listener auf change Veranstaltung. Grundsätzlich gibt es in einem input change-Ereignis, die nicht anrufen, $setViewValue Methode zum aktualisieren $viewValue, die rufen eine Methode zum festlegen $viewValue zu $modelValue zwischen, die Sie genannt $commitValue Methode, um Veränderungen in $modelValue im dass die Methode nur es nennen Zuhörer $viewChangeListner.
    • Ich bin noch immer nicht in die Besonderheiten von dem, was Sie unterscheidet. Tut on-change überwacht eine änderung in der HTML-input-element, aber nicht das ng-ändern Sie das gleiche tun, durch einen bevollmächtigten, durch das hören für einen Wechsel in die Modell-Eigenschaft, die über die HTML-input-element?
    • nicht entlassen werden, wenn die zugrunde liegenden ng-model Wert verändert wird. Hinter der Szene eckige warten zwei Wert für jeden Wert die sind $viewValue & $modelValue, also, wenn $modelValue bekommt nur ändern, dass die Zeit es feuert change-Ereignis von diese Zeile

    InformationsquelleAutor Pankaj Parkar
Schreibe einen Kommentar