Angular 1.5 ng-change auf Element in Komponente triggern vorherige Antwort

Question

Ich fange gerade an, mit Komponenten in Angular 1.5.x zu spielen und habe eine für eine Auswahlbox auf einem Formular erstellt - ich übergebe das Feld, Liste und Etikett auf die Komponente und es erstellt die Form "Teil" bestehend aus der Bezeichnung und Auswahlbox mit den richtigen Optionen - so weit, so gut.

Jetzt möchte ich eine ng-Änderung auf der Auswahl implementieren, so dass ich die Funktion übergeben möchte, die ich dafür verwenden möchte. Das Problem, das ich habe, ist, dass die Funktion mit dem alten Wert für die Auswahl nicht den neuen Wert auslöst. Ich kann sehen, dass die Funktion vor der eigentlichen Änderung auslöst. Wenn ich die Change-Funktion in das Component-Change-Event setze, registriert sie sich korrekt, aber nicht mit einer übergebenen Funktion.

Ich habe eine abgespeckte Geige erstellt bei https://jsfiddle.net/7gd3m2k0/

<div ng-app="demoApp"> 
    <div ng-controller="RoleController as ctrl"> 
    <nac-select  
     field="ctrl.MemberRole.record.member" 
     list="ctrl.Lists.Member" 
     label="Member" 
     on-change="ctrl.MemberRole.changeMember();"></nac-select> 
    <div ng-bind="ctrl.MemberRole.record.member.name"></div> 
    </div> 
</div> 

angular.module('demoApp', []) 
.component('nacSelect', nacSelect) 
.controller('RoleController', roleController) 

var nacSelect = { 
bindings: { 
      field: '=', 
      list: '<', 
      label: '@label', 
      onChange: '&' 
     }, 
     controller: function() { 
      var ctrl = this; 
      ctrl.change = function() {      
       alert(ctrl.field.name); //gives new selection 
       ctrl.onChange(); //gives previous selection 
      } 
     }, 
    template: ` 

    <label>{{$ctrl.label}}</label> 
    <select ng-model="$ctrl.field" ng-options="r as r.name for r in $ctrl.list" ng-change="$ctrl.change();"> 
     <option value="">(Please Select)</option> 
    </select> 
` 
}; 

var roleController = function(){ 
var ctrl = this; 

    ctrl.Lists = { 
Member: [ 
    {id: 1, name: 'Fred Smith'}, 
    {id: 2, name: 'Jenny Jones'}, 
    {id: 3, name: 'Jane Doe'} 
] 
    }; 

ctrl.MemberRole = { 
record: { 
    member: null 
}, 
    changeMember: function(){ 
    alert(ctrl.MemberRole.record.member.name);  
    } 
    }; 
}; 

Ich glaube, ich etwas Einfaches bin fehlt, aber ich kann es nicht herausgefunden. Vielen Dank für Ihre Unterstützung

Answer 1

Sie müssen in Variablen zu übergeben, die Sie in den ersten Controller alarmieren wollen, überprüfen Sie diese:

https://jsfiddle.net/pegla/7gd3m2k0/1/

so Ihre Funktion würde wie folgt aussehen:

changeMember: function(name){ 
     alert(name); 
    } 

wenn Sie verwenden nac-wählen

<nac-select field="ctrl.MemberRole.record.member" list="ctrl.Lists.Member" label="Member" on-change="ctrl.MemberRole.changeMember(name);"></nac-select> 

und am Ende in der nac-select:

<select ng-model="$ctrl.field" ng-options="r as r.name for r in $ctrl.list | orderBy: 'name'" ng-required="$ctrl.req" ng-if="!$ctrl.list.processing" ng-change="$ctrl.onChange($ctrl.field)"> 

oder wenn Sie in Objekt zu übergeben wollen:

changeMember: function(obj){ 
     alert(`${obj.name} ${obj.id}`); 
    } 

Neu:

<nac-select field="ctrl.MemberRole.record.member" list="ctrl.Lists.Member" label="Member" on-change="ctrl.MemberRole.changeMember({id, name});"></nac-select> 

dann changeMember wie folgt aussehen Geige: https://jsfiddle.net/pegla/7gd3m2k0/2/