Dynamically manipulate an array with multiple Angular.js controllers

Question

Well, I have a feature on my system that has a great interaction with the end user, I soon chose to employ the Angular.js.

My goal is popular a array dynamically and when user der Ubmit I send such data via $http post.() for a action on my server that will "parse" such array for my object (reponsability linked to Jackson).

But the problem is I don’t know how to do this in the right way, because I have 2 modals on my screen on which every time I press "Add" a list will be dynamically populated on the screen and such data will be included in this tree.

Below I have the tree of my object in which I want to add the data via angular.

customerData = {
                    "idCustomer":null,
                    "tenantId":null,
                    "birthDate":$scope.birthDate,
                    "email":$scope.email,
                    "firstName":$scope.firstName,
                    "gender":$scope.gender,
                    "lastName":$scope.lastName,
                    "document":{
                       "id":null,
                       "tenantId":null,
                       "rg":$scope.customerRg,
                       "cpf":$scope.customerCpf
                    },
                    "customerPhone":{
                       "id":null,
                       "tenantId":null,
                       "celPhone":$scope.customerCelPhone,
                       "homePhone":$scope.customerHomePhone,
                       "workPhone":$scope.customerWorkPhone
                    },
                    "passenger":null,
                    "customerAddress":{
                       "id":null,
                       "tenantId":null,
                       "cep":$scope.customerAddressCep,
                       "complement":$scope.customerAddressComplement,
                       "number":$scope.customerAddressNumber,
                       "quarter":$scope.customerAddressQuarter,
                       "street":$scope.customerAddressStreet,
                       "city":$scope.customerAddressCity,
                       "state":$scope.customerAddressState,
                       "country":null
                    },
                    "observations":$scope.observations,
                    "site":false,
                    "customerService":{
                       "id":null,
                       "tenantId":null,
                       "date": new Date.now(),
                       "averageBudget":null,
                       "situation":true,
                       "serviceItem":[{
                       }],
                       "history":[{
                          "id":null,
                          "tenantId":null,
                          "register": "Primeiro Atendimento",
                       }],
                       "serviceObservations": "Xpto"
                    }
                 };     

For example I have a controller to add to serviceItem data in list form:

app.controller('RequestedDestinationModalController', ['$scope', function($scope) {
    $scope.addReqDestiantion = function(){
        this.customerData.customerService.serviceItem.push({
            "id":null,
            "destination":$scope.destinationModalCtrl.destination,
            "customerService":null,
            "tenantId":null,
            "valueNegotiated":$scope.destinationModalCtrl.valueNegotiated,
            "saleType":$scope.destinationModalCtrl.saleType,
            "departureDate":$scope.destinationModalCtrl.departureDate,
            "arrivalDate":$scope.destinationModalCtrl.arrivalDate,
            "seeIn":$scope.destinationModalCtrl.seeIn,
            "requestedDestination":$scope.destinationModalCtrl.requestedDestination,
            "negociationObservations":$scope.destinationModalCtrl.negociationObservations
         });
    };
}]);

But in case I needed to leave mine array which contains the keys of the objects stored somewhere to respectively manipulate it. Here’s the question, how to manipulate the array via multiple *controllers?

Answer 1

Then you need to declare the array in a global Scope, not within the controllers.

Each controller has its own specific Scope, but when you create a variable in global scope (in the module that encompasses all controllers of your interest) you can access this variable in all controllers.

Don’t necessarily use a Factory. When you start your angular code you declare a module, which is the main one of your application, right?

var app = angular.module("myApp",[]);

then you assign to this module your services, controllers, etc... using:

app.controller(...
app.service(...
...

if you declare your variables outside the scope of these controllers, services, they will be within the "myapp" module, which is the "parent" of these others. Thus, you have the variables in a global Scope, because all children will access this variable that is in the father.

Answer 2

As each controller has a scope that in your case would be '$Scope', this scope will 'die' when switching controllers. Then I suggest using the $rootScope of the Angularjs (https://docs.angularjs.org/api/ng/service/$rootScope). With it Voce can create a detro array of $rootScope that is accessible to all controllers.

Ex: $rootScope.array.customerData = [];

app.controller('Requesteddestinationmodalcontroller', ['$Scope', '$rootScope', Function($Scope, $rootScope) {

var Object = {}; $rootScope.array.customerData.push(Object);

...