Currently, I am working on two separate applications that have a common requirement of displaying active incidents and closed incidents. Both apps involve similar logic for creating, modifying, saving, and deleting incidents.
I am exploring the best approach to share this CRUD (Create, Read, Update, Delete) logic between the two applications. One idea I had was to establish a parent-child controller setup as shown below:
Common_CRUD_file.js:
var Common_Application = angular.module('Common_Application ',[app, app1, app2, app3])
Parent_controller.controller('Parent_controller'), function ($scope, $http, $filter, $timeout) {
//all CRUD operations are implemented here
$scope.edit = function(data) { //implementation for editing }
$scope.save = function(data) { //implementation for saving }
$scope.cancel = function(data) { //implementation for canceling }
$scope.delete = function(data) { //implementation for deleting }
}
Child_Show_closed_incidents.js:
var Common_Application = angular.module('Common_Application');
Child_controller.controller('Child_controller'), function ($scope, $http, $filter, $timeout) {
//All application-specific logic goes here
$scope.get_data = function(data) { //retrieve and store data in $scope.All_closed_incidents }
}
Snippet from the HTML file:
<div ng-app="Common_Application" ng-controller="Parent_controller">
<div ng-controller="Child_controller">
<table directive_for_angular_app_here>
<tr>
<td></td>
<td>Description</td>
<td>Status</td>
</tr>
<tr ng-repeat="incident in All_closed_incidents">
<td><button type="button" ng-click="edit(incident)">Edit</button></td>
<td>{{incident.Description}}</td>
<td>{{incident.Status}}</td>
</tr>
</div>
</div>
Despite setting up this structure, I am facing issues where the edit function does not get triggered when clicking the button. No errors are displayed in the console either. It appears that the Parent functions are being ignored, even though I expected them to be shared across scopes. Can someone suggest a better approach for handling this scenario?