角。コンポーネントから親コントローラーへのデータの受け渡し

Question

親コントローラーのコンポーネントからのデータの受理

index.htmlを

<div ng-controller="formController"> 
    <phones-list phone="phone"></phones-list> 

    <button ng-click="saveForm()">Save</button> 
</div> 

form.controller.js

var app = angular.module('myApp'); 

app.controller('formController', ['$scope', function($scope) { 
    $scope.saveForm = function() { 
     console.log($scope.phone) 
    } 
}]); 

phoneList.component.js

var app = angular.module('myApp'); 

app.component('phonesList', { 
    templateUrl: '/scripts/components/phones/phonesList.template.html', 
    controller: 'phonesListController', 
    bindings: { 
     phone: '=' 
    } 
}); 

phoneList.template.html

： 私はこのコードを持っています

<select name="" id="" ng-change="$ctrl.change()" ng-model="$ctrl.phone"> 
    <option ng-repeat="phone in $ctrl.phones">{{ phone.name }}</option> 
</select> 

phoneList.controller.js

var app = angular.module('myApp'); 

app.controller('phonesListController', function() { 

    this.phones = [ 
     { 
      name: 'ABC', 
      number: '723-543-122' 
     }, 
     { 
      name: 'ABCDE', 
      number: '324-531-423' 
     }   
    ]; 

    this.change = function() { 
     console.log(this.phone) 
    } 

}); 

だから私は、携帯電話との選択リストを持っています。私が望むのは、フォームを選択して送信した後にformControllerで電話オブジェクトを取得することです。今のところ私はテキストの価値しか得ていません。

Answer 1

phoneListコンポーネントに追加のバインディングを追加し、選択が変更されたときに呼び出す関数を追加します。

phoneList.component.js

var app = angular.module('myApp'); 

app.component('phonesList', { 
    templateUrl: '/scripts/components/phones/phonesList.template.html', 
    controller: 'phonesListController', 
    bindings: { 
     phone: '=', 
     onChange: '&' //This will allow you to bind a function to your 
    }     //component that you can execute when something 
});     //happens 

phoneList.controller.js

var app = angular.module('myApp'); 

app.controller('phonesListController', function() { 

    this.phones = [ 
     { 
      name: 'ABC', 
      number: '723-543-122' 
     }, 
     { 
      name: 'ABCDE', 
      number: '324-531-423' 
     }   
    ]; 

    this.change = function() { 
     console.log(this.phone); 
     this.onChange({phone: phone}); //call our new callback and give it 
    }         //our update 

}); 

index.htmlを

<div ng-controller="formController"> 
    <phones-list phone="phone" 
       on-change="phoneSelected(phone)"> 
       <!--Tell our component which function we wish to bind to--> 
    </phones-list> 

    <button ng-click="saveForm()">Save</button> 
</div> 

form.controller.js

var app = angular.module('myApp'); 

app.controller('formController', ['$scope', function($scope) { 
    $scope.saveForm = function() { 
     console.log($scope.phone) 
    } 

    $scope.phoneSelected(phone){ 
     //Do your stuff here! 
    } 
}]); 

私はそれが助けてくれることを願っています！

Answer 2

解決策が見つかりました。コンポーネントテンプレートを変更し、ng-optionsディレクティブを追加しました。私はなぜ標準的なリストで同じことをするのは難しいかわからない。

index.htmlを

<div ng-controller="ProposalController"> 
     <phones-list phone="phone"></phones-list> 

     <button ng-click="saveForm()">Zapisz</button>  
    </div> 

phoneList.component.js

var app = angular.module('myApp'); 

app.component('phonesList', { 
    templateUrl: '/components/phones/templates/phoneList.template.html', 
    controller: 'PhoneListController', 
    bindings: { 
     phone: '=' 
    } 
}); 

phoneList.controller.js

.... 
this.change = function() { 
    this.phone = this.selectedPhone; 
} 
.... 

phoneList.template.html

<select ng-model="$ctrl.selectedPhone" ng-change="$ctrl.change()" ng-options="phone.name for phone in $ctrl.phones"></select> 

form.controller.js

$scope.saveForm = function(){ 
    console.log($scope.phone) 
}