Angular. Pass data from component to parent controller

Question

Hot to recive data from component in parent controller. I have this code:

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

});

So I have select list with phones. What I want is to get phone object in formController after select and submit form. For now I get only text value from .

Answer 1

I found the solution. I changed component template and add ng-options directive to . I don't know why it is more diffucult to do the same in standard list.

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

Answer 2

Add an additional binding to your phoneList component with a function to call when the selection changes.

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!
    }
}]);

I hope that helps!