I have developed a data service to facilitate communication between two controllers, but it seems like there is an issue with its functionality.
Below is the code for the service:
app.factory('SubmitService', function($rootScope) {
var data = {};
data.prepForBroadcast = function(recvData) {
data = recvData;
this.broadcastItem();
};
data.broadcastItem = function() {
$rootScope.$broadcast('handleBroadcast');
};
return data;
});
The purpose of this service is simple - it is meant to pass an object between controllers. The following are the functions that are responsible for utilizing this service in my controllers:
In the controller where data is being sent (typically from a form):
$scope.submit = function() {
submitService.prepForBroadcast($scope.formData);
}
In the controller where data is received and manages a list of items:
$scope.$on('SubmitService', function() {
this.sampleItems.push(submitService.data);
});
To trigger the submit function, I simply call it from a button using ng-click:
<button class="btn btn-primary" style="height:35px;width:100px;float:right;" id="submit"
ng-disabled="isDisabled()" ng-click="submit()">
Submit
</button>
UPDATE 2: Provided below is the receiving controller along with a snippet of its test array:
app.controller('noteController', ['$scope', 'SubmitService', function($scope, submitService) {
$scope.$on('handleBroadcast', function() {
this.sampleItems.push(submitService.data);
});
this.sampleItems = [{
"title":"Sample Note",
"text":"This is just a sample text to test out how this works. Example example example!!!",
"date": new Date()
},
// more examples that aren't relevant
I suspect there may be an issue with accessing my array. Can someone help me identify the root cause? I'm still relatively new to JavaScript.