Angular parentController get value from childController

Question

I have one controller to get all records from table1. In table2, I have a foreign key to table1. With machineController I managed to populate select tag in html. But want on post to fill sparePartController. From some reason this is not working, I made a mistake somewhere, could you help me understand where?

<div ng-app="app" ng-controller="sparePartController as vm">
    <div class="form-group" ng-controller="machineController as machineVM">
        <label>Machine Type</label>
        <select class="form-control" ng-model="vm.newSparepart.machine" ng-options="machine.name for machine in machineVM.machines"></select>
    </div>
</div>

//sparePartController.js
(function () {
    "use strict";

    angular.module("app")
        .controller("sparePartController", sparePartController);

    function sparePartController($http)
    {
        var vm = this;

        vm.spareParts = [];
        vm.newSparePart = {};

        vm.errorMessage = "";
        vm.isBusy = true;

        $http.get("/spares/getAll")
            .then(function (response) {
                //success
                angular.copy(response.data, vm.spareParts);
            }, function (error) {
                vm.errorMessage = error;
            }).finally(function () {
                vm.isBusy = false;
            });

        vm.addSparePart = function () {
            vm.isBusy = true;
            vm.errorMessage = "";

            $http.post("/spares", vm.newSparePart)
                .then(function (response) {
                    alert("Test");
                    vm.spareParts.push(response.data);
                    vm.newSparePart = {};
                }, function () {
                    alert(vm.data);
                    vm.errorMessage = "failed to save new spare";
                }).finally(function () {
                    vm.isBusy = false;
                });
        };
    }
})();

// machineController.js
(function () {
    "use strict";

    angular.module("app")
        .controller("machineController", machineController);

    function machineController($http) {
        /* jshint validthis:true */
        var vm = this;

        vm.machines = [];
        vm.newMachine = {};

        vm.errorMessage = "";
        vm.isBusy = true;

        $http.get("/machines/GetMachines")
            .then(function (response) {
                // Success
                angular.copy(response.data, vm.machines);
            }, function (error) {
                // Failure
                vm.errorMessage = "Failed: " + error;
            }).finally(function () {
                vm.isBusy = false;
            });

            vm.addMachine = function () {
                vm.isBusy = true;
                vm.errorMessage = "";
            $http.post("/machines", vm.newMachine)
                .then(function (response) {
                    vm.machines.push(response.data);
                    vm.newMachine = {};
                }, function () {
                    //fail
                    vm.errorMessage = "Failed to save new machine type";
                }).finally(function () {
                    vm.isBusy = false;
                });
        };
    }
})();

Can you please check this, where am I wrong ? Code to check

Answer 1

Scopes in Angular use prototypical inheritance i.e all the parent properties are accessible to children. When trying to access a property in child scope the interpreter traverses the prototype chain starting from the child and moving up the parent chain and not the other way around i.e You want get the hold of child properties in parent scope.

In simple words. You can't access child scopes from parents.

So what is the solution for this problem.

1. Define properties in the parent scope and use in child

2. Use service/rootscope(not recommended) to share data between controllers

3. Communicate between controllers using $emit or $broadcast

The choice of the which technique to use is totally yours and depends on the type of application that you are working on. So choose wisely.

Below is one such example using service that helps you to share data between two controllers

var myApp = angular.module('myApp', []);
myApp.service('Data', function() {
  this.message = "I'm data from a service";
  this.secondMessage = "Another Data in service";
})

function FirstCtrl($scope, Data) {
  $scope.data = Data;
}

function SecondCtrl($scope, Data) {
  $scope.data = Data;
}

function thirdCtrl($scope, Data) {
  $scope.data = Data;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="FirstCtrl">
    <h1>Controller 1</h1>
    <input type="text" ng-model="data.message">
    <h1>{{data.message}}</h1>
  </div>

  <div ng-controller="SecondCtrl">
    <h1>Controller 2</h1>
    <input type="text" ng-model="data.secondMessage">
    <h1>{{data.message}}</h1>
  </div>

  <div ng-controller="thirdCtrl">
    <h1>Controller 3</h1>
    <input type="text" ng-model="data.secondMessage">
    <h1>{{data.secondMessage}}</h1>
  </div>
</div>

Reference : Discussion on Share data from child to parent controller

In Depth Scope Inheritance in Angular

Hope this helps :)

Answer 2

please apply this code,it will work.

var testCtrl1ViewModel = $scope.$new();

 $controller('childControllerName', {$scope: testCtrl1ViewModel});