組件觸發前一個響應中的選擇元素的角度爲1.5納克改變

我剛剛開始使用Angular 1.5.x中的組件，並且爲窗體上的選擇框創建了一個 - 我傳入了字段，列表和標籤添加到組件中，並創建由標籤和選擇框組成的「部件」形式，並帶有正確的選項 - 迄今爲止，非常好。組件觸發前一個響應中的選擇元素的角度爲1.5納克改變

現在我想在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);  
    } 
    }; 
};

創造了刪節撥弄我想我失去了一些東西簡單，但我無法弄清楚。謝謝您的幫助

來源

2017-09-24 Mandy Hodges

您需要在您要在第一個控制器，以提醒變量傳遞，檢查：

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/

來源

2017-09-24 08:48:15 pegla

謝謝，但如果我想傳遞整個對象呢？有兩個對象 - 一個成員和一個角色。主控制器的功能基本上是：if（成員是對象和角色是對象）然後做一些檢查 - 這就是爲什麼我試圖在該函數中使用模型的值。 –

它傳遞對象，檢查更新的答案是一樣的，我也必須說，即使這將工作，我會重新考慮你的方法，如果你開始使用基於組件的體系結構，你不應該使用2種方式綁定並在父組件上進行中繼因爲整個目的是隔離組件以使它們變得小而且可重用。我建議閱讀這個，真正最好的在線基於組件的教程：https://github.com/toddmotto/angularjs-styleguide – pegla

非常感謝你 - 我只是想出了發送對象的事情，因爲https：/ /stackoverflow.com/questions/18378520/angularjs-pass-function-to-directive。我會閱讀你的建議，因爲我認爲我通過傳遞我想要的功能，當選擇改變時，使組件變得小而可重用:)。 –

組件觸發前一個響應中的選擇元素的角度爲1.5納克改變

回答

相關問題