how to share data among Controllers using only factory method

Question

hi so far i had tried below code

HTML

    <div ng-controller="mycontroller">  <button ng-click ="clickme()"> 
  demoooooo</button>  {{message}}</div>

    <div ng-controller="hellocontroller">{{message}}</div>

in my js

app.factory("datafactory",function("dataFactory"){
    var mouse={}
    mouse.dosum=function(){
    return "my world";
}

});

    app.controller(" mycontroller",function(){
$scope.clickme=function(){
     $scope.message=datafactory.dosum()
    }});

    app.controller(" mycontroller",function(){
     $scope.message=datafactory.dosum()
    });

and my question is that after clicking the button only the data should render in both the controllers thank you! can anyone explain me clearly how come i can achieve it . In my second controller the data appears before hitting the button

score 0 · Answer 1 · answered May 25 '18 at 11:30

You need to broadcast an event to all controllers. Then listen to that event and do any action upon it, like printing your message. The broadcast would need $rootScope.$broadcast along with a listener $scope.$on, which will execute the function (and display a message).

Here is a working demo:

var app = angular.module('myApp', []);
app.factory("datafactory", function() {
  var mouse = {}
  mouse.dosum = function() {
    return "my world";
  }
  return mouse;

});

app.controller("mycontroller", function($scope, $rootScope, datafactory) {
  $scope.clickme = function() {
    $rootScope.$broadcast("some-event");
  }
  $scope.$on("some-event", function() {
    $scope.message = datafactory.dosum()
  })
});

app.controller("hellocontroller", function($scope, datafactory) {
  $scope.$on("some-event", function() {
    $scope.message = datafactory.dosum()
  })
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

  <div ng-app="myApp">

    <div ng-controller="mycontroller">
      <button ng-click="clickme()">Broadcast</button>
      <hr> 
      [mycontroller] {{message}}
    </div>
    <hr>
    <div ng-controller="hellocontroller">
      [hellocontroller] {{message}}
    </div>

  </div>

</body>

</html>

No, he does NOT need to. He can but there are definitely other options. Service, $rootScope, cookie or browser memory as storage, ui router with states parameter if the situation is good for that.. IMHO, unless special cases - service is the best option. Bombarding your 1500 controllers from $root scope with broadcast to listen to events over and over? No thanx. — DanteTheSmith, May 25 '18 at 11:57
@DanteTheSmith the other controller somehow has to known that he needs to execute the function, that's what listeners are for — Aleksey Solovey, May 25 '18 at 12:00
oh, in that case $watch on service or observer pattern https://stackoverflow.com/questions/12576798/angularjs-how-to-watch-service-variables — DanteTheSmith, May 25 '18 at 12:03
aleksey Solovey Can we obtained it without using broadcast and rootscope please — ronaldino, May 25 '18 at 12:05

score -1 · Answer 2 · answered May 25 '18 at 11:18

-1

A factory is a good solution for use external file to handle data or class for API calls but the issue with the factory is that is created a new instance to each controller, try to create Angularjs service (use this tutorial: https://viralpatel.net/blogs/angularjs-service-factory-tutorial/)

the angular service will create one instance for this class, that way you can share data between controllers.

answered May 25 '18 at 11:18

Barouch Kandov

96
8

service is literally a factory. It doesn't really matter which provider to use – Aleksey Solovey May 25 '18 at 11:55
Yes you are right, but the difference is that when you creating factory it always creates a new instance but service creates only one instance, that way you can create one service and share the data between the controllers – Barouch Kandov May 25 '18 at 13:53

how to share data among Controllers using only factory method

2 Answers2