이전 응답을 트리거하는 구성 요소의 선택 요소에 각도 1.5 ng 변경

Question

각도 1.5.x의 구성 요소를 사용하기 시작했으며 양식의 선택 상자에 하나를 생성했습니다. 필드, 목록 및 레이블을 구성 요소에 추가하고 올바른 옵션으로 레이블과 선택 상자로 구성된 '부분'양식을 작성합니다. - 지금까지는 그렇게 좋았습니다.

이제는 select에서 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);  
    } 
    }; 
}; 

에서 컷 다운 바이올린을 만들었습니다,하지만 난 그것을 알아낼 수 없습니다. 당신은 첫 번째 컨트롤러에 경고 할 변수에 전달해야 당신의 도움

Answer 1

주셔서 감사합니다,이를 확인 :

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

그래서 함수가 다음과 같을 것이다 :

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

사용중인 NAC를-선택

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

과 NAC-선택에서 결국 :

<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/