Share function between two controllers angularjs

Question

I'm trying to create a shared resource between two controllers in angularjs. I have use the getData() in second controller to get the stored data and fill up a data table inside the second controller. I omitted the data Table part in the code for simplicity.

The following is my controller file with two controllers

    (function(){
      var app = angular.module('adminCtrls',[]);
      // Main Controller
      app.controller('mainCtrl', function( $scope, $http,testSrv ){

         // Get the data form the phoenix database based on the query defined 
         // in db_size.php 
         $http.get('rest/admin/db_size.php').then(function(response){
         $scope.answers = response.data;
         $scope.me = "$scope.answer";
          testSrv.setData($scope.me);
        });
         });
      })

      // Modal Controller
      app.controller('modalCtrl', function($scope,$http,testSrv ){
      console.log(testSrv.getData());

        });

      });

  })(); // EOF

The following is my angular application file

    (function(){
    // Angular App
    var app = angular.module('adminApp', ['ngRoute', 'adminCtrls', 'siteSrvs']);
    // Routing
    app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){

        // HTML5 Mode
        $locationProvider.html5Mode({
          enabled: true
        });

    }]);

    })();

This is my service.

(function(){

  // Phoenix Services
  var phx = angular.module('siteSrvs',[]);

  // Main
  phx.service('testSrv', function($http){

    // Data Storage
    var data = '';
    var answers = '';

    // Returned Functions
    return {
      getData : _getData,
      setData : _setData,
      getAnswers : _getAnswers
    }

    // Get Data
    function _getData(){
      return data;
    }

    // Set Data
    function _setData(t){
      if(t) data = t;
    }

    function _getAnswers(){
      return $http.get('/rest/test2/test2.php');
    }

  });

  })(); // EOF

I am trying to set data in my first controller and the get the same data from my second controller.

My second controller cannot see the data which was stored by first controller.

I want to know if I'm missing any module injection??

score 0 · Answer 1 · answered May 11 '17 at 21:56

0

I would say you have everything correct in your code, you just have to bind your modal controller to a view so it will be called, then you'll see the value in your service:

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div ng-controller="modalCtrl">{{data}}</div>
</body>

Just added a variable to the scope to print it in the view:

// Modal Controller
app.controller('modalCtrl', function($scope, $http, testSrv) {
   $scope.data = testSrv.getData();
   console.log('modalCtrl',$scope.data);
});

Here's a plunker to try it out by yourself.

answered May 11 '17 at 21:56

elvin

961
1
9
26

I'm trying to use getData method in second controller to get the data and populate a data Table inside the second controller. My problem is getData does not show the data which was stored by first controller – Hosein Zarifi May 11 '17 at 22:12
To keep it simple, I commented out the call to the service that you have in the first controller. I would recommend you to check if the setData is being actually called, because if there's any error won't never be called. You could call the setData outside that block just to test it out or catch the error for that call. – elvin May 11 '17 at 22:23

Share function between two controllers angularjs

1 Answers1