Question

我刚开始使用Angular 1.5.x中的组件并为表单上的选择框创建一个组件 - 我将字段，列表和标签传递给组件，并创建表单'part'组成标签和选择框的正确选项 - 到目前为止，非常好。

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

创建了一个简洁的小提琴

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

组件中选择元素的角度1.5 ng变化触发先前的响应

1 个答案: