Angular 组件中 select 元素的 1.5 ng-change 触发了先前的响应

Question

我刚开始使用 Angular 1.5.x 中的组件，并为表单上的 select 框创建了一个 - 我在字段中传递，列表并为组件添加标签，它会创建由标签和 select 框组成的表单 'part'，并带有正确的选项 - 到目前为止，还不错。

现在我想在 select 上实现一个 ng-change，所以我传入了我想为此使用的函数。我遇到的问题是函数是用 select 的旧值而不是新值触发的。我可以看到该功能在实际更改之前触发。如果我将更改函数放在组件更改事件中，它会正确注册，但不会使用传入的函数。

我在 https://jsfiddle.net/7gd3m2k0/

处创建了一个缩减 fiddle

<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-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}`);
    }

新fiddle： https://jsfiddle.net/pegla/7gd3m2k0/2/

Angular 组件中 select 元素的 1.5 ng-change 触发了先前的响应

Angular 1.5 ng-change on select element in component triggering previous response

angularjs

angularjs-ng-change

angularjs-components