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

Question

我刚刚开始使用 Angular 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-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/