How to send data from component to parent in AngularJS 1.x
I have two tabs as a component that contains some input field, when I click the SAVE button , I want to get their value and save it to the server. The problem is that the SAVE function is in index.js
(parent) and the input fields are in TestComponent.js
. I couldn't find a way to get the values from the component and send it to the parent controller (indexController.js).
I have also tried to use binding , for example, to store all data as an object and send the object to indexController.js
but unfortunately I have not had any success.
Please also look at PLUNKER for an example.
Can someone help me with this.
index.html
<body ng-app="heroApp">
<div ng-controller="MainCtrl as vm">
<!-- Component Started -->
<md-tabs>
<tab-component> </tab-component>
</md-tabs>
<!-- Component Ended -->
<button type="submit" ng-click="save()"> Save </button>
</div>
</body>
index.js
(function(angular) {
'use strict';
angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
var vm = this;
this.onStatusChange = function(data) {
vm.mandatoryFilesIncluded = data;
};
this.save = function() {
vm.requestInProgress = true;
vm.Upload.upload({
url: someURL,
arrayKey: '',
data: {
file: vm.files,
name: vm.data.name,
title: vm.data.title,
description: vm.data.description,
}
}).then(function(response){
alert("data is uploaded.");
});
};
});
})(window.angular);
tabComponent.html
<!-- Upload Tab-->
<md-tab id="picTab" label="Pic">
<div layout-gt-xs="row" layout-align="start center">
<md-input-container style="padding-left: 0">
<md-button>
<md-icon class="material-icons">attach_file</md-icon>
</md-button>
</md-input-container>
</div>
</md-tab>
<!-- Info Tab-->
<md-tab id="infoTab" label="Info">
<md-content class="md-margin">
<div layout-gt-sm="row">
<!-- Name -->
<md-input-container>
<label>Name</label>
<input ng-model="vm.data.name" name="name" required>
</md-input-container>
<!-- Title -->
<md-input-container class="md-block" flex-gt-sm>
<label>Title</label>
<input ng-model="vm.data.title" name="title" required>
</md-input-container>
</div>
<!-- Description field -->
<div layout="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Description</label>
<textarea ng-model="vm.data.description" name="descriptionField" rows="1"></textarea>
</md-input-container>
</div>
</md-content>
</md-tab>
tabComponent.js
(function(angular) {
'use strict';
angular.module('heroApp').component('tabComponent', {
templateUrl: 'tabComponent.html',
controller: myComponentController,
controllerAs: 'vm',
bindings: {
statusChange: '&',
}
});
})(window.angular);
function myComponentController() {
var ctrl = this;
ctrl.mandatoryFilesIncluded = false;
}
source to share
Since the button save
runs in the main controller, you can define it vm.data
in the controller and bind it to the component:
bindings: {
data: '=',
}
and tab-component
pass the data as:
<tab-component data="vm.data"> </tab-component>
This way, any change to the internal component vm.data
will also be reflected in the controller.
source to share