Я только начинаю играть с компонентами в Angular 1.5.x и создал один для поля выбора в форме - я передаю поле, список и метку компоненту, и он создает "часть" формы, состоящую из метки и выберите поле с правильными параметрами - пока все хорошо.
Теперь я хочу реализовать ng-change для выбора, поэтому я передаю функцию, которую хочу использовать для этого. У меня проблема в том, что функция запускается со старым значением для выбора, а не с новым значением. Я вижу, что функция срабатывает до фактического изменения. Если я помещаю функцию изменения в событие изменения компонента, она регистрируется правильно, но не использует переданную функцию.
Я создал урезанную скрипту по адресу 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);
}
};
};
Я предполагаю, что мне не хватает чего-то простого, но я не могу понять это. Спасибо вам за вашу помощь