Doubt about services Angularjs

Question

A tip please if I have a service ServiceY and this service has an attribute ServiceY.nome. On the same screen I have four controller, being: controller_A, controller_B, controller_C and controller_D the four of them controller use the same service.

When I’m in the controller_A and do a certain action, Set a value within ServiceY.nome, in the controller_B I make a get of the value present in ServiceY.nome previously passed and get the correct result.

Now, inside the controller_C I will set the ServiceY.nome and in the controller_D I will read this attribute, but I don’t want to change the values of controller_A and controller_B. What would be the best way to do that?

Answer 1

If I understand correctly, you want to isolate scopes of instances of ServiceY:

• controller_A and controller_B share an instance (let’s call it ISY1 for reference purposes);
• controller_C and controller_D share another instance (ISY2).

I would then suggest using a Factory instead of a service. The characteristic that defines a service is the fact that this is a Singleton - a single instance; Factories create a new instance for each consumer object (in your case, an instance by control).

The following is an example that implements a Factory with a method, register(), where a parameter indicates the instance to be shared:

Click on Execute to see it in action:

angular.module('myApp', [])
    .factory('factoryCompartilhada', function () {

        var itens = {}; // coleção de instâncias

        return {
            register: function (codigo) {
                if (!itens[codigo]) // se não existe,
                  itens[codigo] = {dado: codigo}; // cria instância
                  
                return itens[codigo]; // retorna instância
            }
        }
    })

    .controller('ctrlA', function ($scope, factoryCompartilhada) {
        $scope.instanciaFactory = factoryCompartilhada.register('ISY1');
    })
    .controller('ctrlB', function ($scope, factoryCompartilhada) {
        $scope.instanciaFactory = factoryCompartilhada.register('ISY1');
    })
    .controller('ctrlC', function ($scope, factoryCompartilhada) {
        $scope.instanciaFactory = factoryCompartilhada.register('ISY2');
    })
    .controller('ctrlD', function ($scope, factoryCompartilhada) {
        $scope.instanciaFactory = factoryCompartilhada.register('ISY2');
    })
    ;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="myApp">
  <div ng-controller='ctrlA'>
      Controller_A: <input ng-model='instanciaFactory.dado' />
  </div>
  <div ng-controller='ctrlB'>
      Controller_B: <input ng-model='instanciaFactory.dado' />
  </div>
  <div ng-controller='ctrlC'>
      Controller_C: <input ng-model='instanciaFactory.dado' />
  </div>
  <div ng-controller='ctrlD'>
      Controller_D: <input ng-model='instanciaFactory.dado' />
  </div>
</div>