Angular 1.5 ng-change для выбранного элемента в компоненте, вызывающем предыдущий ответ

Я только начинаю играть с компонентами в 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);    
    }  
  };
};

Я предполагаю, что мне не хватает чего-то простого, но я не могу понять это. Спасибо вам за вашу помощь


person Mandy Hodges    schedule 24.09.2017    source источник


Ответы (1)


Вам нужно передать переменную, которую вы хотите предупредить в первом контроллере, проверьте это:

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

поэтому ваша функция будет выглядеть так:

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

когда вы используете nac-select

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

и в итоге в 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)">

или если вы хотите передать объект:

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

тогда ваш changeMember может выглядеть так:

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

Новая скрипка: https://jsfiddle.net/pegla/7gd3m2k0/2/

person pegla    schedule 24.09.2017
comment
спасибо, но что, если я хочу передать весь объект? есть два объекта - член и роль. функция основного контроллера в основном такова: если (член является объектом, а роль - объектом), выполните некоторые проверки - вот почему я пытался использовать значение модели в этой функции. - person Mandy Hodges; 25.09.2017
comment
это то же самое, чтобы передать объект, проверить обновленный ответ, также я должен сказать, что, хотя это будет работать, я бы переосмыслил ваш подход, если вы начали с компонентной архитектуры, вы не должны использовать двухсторонние привязки и ретрансляцию на родительские компоненты как вся цель состоит в том, чтобы изолировать компоненты, чтобы сделать их маленькими и многоразовыми. Я бы порекомендовал прочитать это действительно лучшее онлайн-руководство по компонентной архитектуре: github.com/toddmotto/angularjs- руководство по стилю - person pegla; 25.09.2017
comment
большое спасибо - я только что понял отправку объекта в результате stackoverflow.com/questions/18378520/. Я прочитаю ваше предложение, потому что я думал, что делаю компонент небольшим и пригодным для повторного использования, передавая нужную мне функцию при изменении выбора :). - person Mandy Hodges; 25.09.2017
comment
Нет проблем, вы можете принять ответ, если он был полезен. - person pegla; 25.09.2017