CODEWITHSUNDEEP
javascriptangularjsangularjs-components
Patrick McDermott
Patrick McDermott

Reputation: 1220

how to access parents controller data within component in angularjs

I have been told to incorporate AngularJS's component into my app. Before using components, I had two controllers, patentList and patentItem. When a user clicked on an item from the patent list, it would load more details on that specific patent item.

Now I have included the controllers in the components, data is failing to populate the patent item table. This is down to (I think) that the patent item is a child of patent list and I was able to access the parents data.

When I log the selected item, it shows with all properties and values. console log of item selected

My question is, how do I access the data of parent controller now I have used components? Any help would be greatly appreciated

list-patents

<tr ng-repeat="x in $ctrl.patents">
    <td ng-click="$ctrl.select(x)"><a ui-sref="patents.list.item({id: x.id})">{{x.applicationNumber}}</a></td>
    <td ng-bind="x.clientRef"></td>
    <td ng-bind="x.currentRenewalCost">$</td>
    <td ng-bind="x.costBandEndDate"></td>
    <td ng-bind="x.renewalCostNextStage"></td>
    <td ng-bind="x.renewalDueDate"></td>
</tr>

patent-item

<tr ng-repeat="x in $ctrl.patentItem">
    <td><input type="text" ng-model="x.patentApplicationNumber"></td>
    <td><input type="text" ng-model="x.clientRef"></td>
    <td><input type="text" ng-model="x.renewalStatus"></td>
    <td><input type="text" ng-model="x.costBandEndDate"></td>
    <td><input type="text" ng-model="x.renewalCostNextStage"></td>
    <td><input type="text" ng-model="x.renewalDueDate"></td>
</tr>

app.js

var app = angular.module('myApp', ['ngRoute', 'ui.router']);

app.config(function($stateProvider, $locationProvider, $urlRouterProvider, localStorageServiceProvider) {

    app.component('patentList', {
        scope: {},
        templateUrl: "templates/patents/list/list-patents.htm",
        controller: function(loadPatentsService, loadPatentItemService) {

            var vm = this;

            vm.select = function(item) { 
               vm.patentItem = loadPatentItemService.select(item);
               console.log(item)
            }
        }
    })
});

app.component('patent', {
    scope: {},
    templateUrl: "templates/patents/list/patent-item.htm",  
    controller: function(patentTabService, loadPatentItemService) {

        var vm = this;

       //LOAD OF CODE FOR A TAB PANEL

    }
})

app.factory('loadPatentItemService', function() {

    var factory = {};

        factory.select = function(item) {
            factory.storeSelect = [];
            selectedItem = item; 
            factory.storeSelect.push(selectedItem)
            return [selectedItem];
        }      

    return factory;

})

app.factory('patentTabService', function() {

    var factory = {};

        //CODE RELATED TO THE TAB PANEL

    return factory;

});

Upvotes: 2

Views: 481

Answers (3)

georgeawg
georgeawg

Reputation: 48968

Intercomponent Communication

This can be achieved in a component by providing an object mapping for the require property. The object keys specify the property names under which the required controllers (object values) will be bound to the requiring component's controller.

For more information, see

Upvotes: 2

Rohan Kawade
Rohan Kawade

Reputation: 473

You need to use $broadcast and $on

$scope.$broadcast ('key', {data: value}); //to set the value in parent 

 $scope.$on('key', function (event, data) {}); // to get the value in child

Upvotes: 0

Tushar Walzade
Tushar Walzade

Reputation: 3819

You can use $emit/$broadcast with $scope.$on

here is the plunker for your reference

Upvotes: 0

Related Questions