I am facing an issue with my component that consists of two tabs containing input fields. I need to retrieve the values from these input fields when the SAVE button is clicked and save them to the server. The problem lies in the fact that the SAVE function is located in the parent index.js, while the input fields are within the TestComponent.js. I have been struggling to find a way to extract the input values from the component and send them to the Parent Controller (indexController.js).
I attempted to use binding as a solution by storing all the data in an object and passing the object to the indexController.js, but unfortunately, it did not work as expected.
Please refer to the PLUNKER for a demonstration of the issue.
If anyone could provide assistance on this matter, it would be greatly appreciated.
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;
}