I have two tabs as a component, which contains some input field, when I press the SAVE button I want to get the value of them and save it to the server. The problem is SAVE function is in the index.js (parent) and the Input fields are in the TestComponent.js. I couldn't find the way to get the values from the component and send it to the Parent Controller (indexController.js).
I also tried to use the binding, for example to save all the data as an object and send the object to the indexController.js but unfortunately I wasn't successful.
Please also take a look at the PLUNKER for the example.
Can someone help me with that.
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;
}
Since save button fires in main controller, you can define vm.data into controller and bind it to component:
bindings: {
data: '=',
}
and tab-component pass data as:
<tab-component data="vm.data"> </tab-component>
So any change of vm.data inside component will be reflected in controller too.