Angularjs - Cross Controller Calculation

Question

I am trying to create an application with Angularjs, It's a fairly large application which needs to be broken down into multiple Controllers. I need to calculate across controllers.

angular.module('Cross.Controller.demo',[]);

angular.module('Cross.Controller.demo').controller('KidsCtrl', function ($scope) {
   $scope.Kids = [
    {"Name":"John", "Expense":"1000"}, 
    {"Name":"Anna", "Expense":"900"}];
});

angular.module('Cross.Controller.demo').controller('HouseCtrl', function ($scope) {
   $scope.House =  {"Category":"Utilities", "Expense":"2000"};
});

angular.module('Cross.Controller.demo').controller('ResultCtrl', function ($scope) {
   $scope.Result =  {"Category":"Total", "Expense":"2000"};
});

<!doctype html>
<html ng-app="Cross.Controller.demo">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="script.js"></script>
<body>
  <div ng-controller="KidsCtrl">
    <div ng-repeat="kid in Kids">
    {{kid.Name}}
    <input type="text" ng-model="kid.Expense">
  </div>
  </div>
  
  <div ng-controller="HouseCtrl">
    {{House.Category}}
    <input type="text" ng-model="House.Expense">
  </div>
  
  <div ng-controller="ResultCtrl">
    {{Result.Category}}
    <input type="text" ng-model="Result.Expense">
  </div>
</body>
</html>

Please find my Plunk here.

I want to add both the expenses from the kids and expense from house to the Result Controller's "Result.Expense"

How about creating a service / factory object and having all three interact with the service to perform your calculations? — Chris, Apr 22 '15 at 16:58

score 1 · Accepted Answer · edited May 23 '17 at 11:51

Put it all into a service and call out to the service for everything.

Edit: see updated plnk. All this said, you will now need to notify the controllers when these change in the service. See my answer here on using the observer pattern with a service in Angular.

angular.module('Cross.Controller.demo',[]);

angular.module('Cross.Controller.demo').factory('sharedFactory', function() {
     var kids = [
       {"Name":"John", "Expense":"1000"}, 
       {"Name":"Anna", "Expense":"900"}];

     var house = {"Category":"Utilities", "Expense":"2000"};

     var getHouse = function() {
       return house;
     }

     var getKids = function() {
       return kids;
     }

     var getTotalExpenses = function() {
        var expenses = parseInt(house.Expense);
        kids.forEach(function(kid) {
          expenses += parseInt(kid.Expense);
        });

        return {
          Category: "Total",
          Expense: expenses
        }
     }

     return {
       getHouse: getHouse,
       getKids: getKids,
       getTotalExpenses: getTotalExpenses
     }
});

angular.module('Cross.Controller.demo').controller('KidsCtrl', function ($scope, sharedFactory) {
   $scope.Kids = sharedFactory.getKids();
});

angular.module('Cross.Controller.demo').controller('HouseCtrl', function ($scope, sharedFactory) {
   $scope.House = sharedFactory.getHouse();
});

angular.module('Cross.Controller.demo').controller('ResultCtrl', function ($scope, sharedFactory) {
   $scope.Result = sharedFactory.getTotalExpenses();
});

It has to be dynamic. when the expense for kids and house is changed. we need to update the result. — Jay, Apr 22 '15 at 17:17
So put a `setKids()` or `addKids()` or `updateKids()` in the service and do whatever it is you have to do. Then follow the link I posted to use the [observer pattern](http://en.wikipedia.org/wiki/Observer_pattern) and notify controllers when kids are updated. — Tom, Apr 22 '15 at 17:22

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

Your best bet is to use a service or a factory

you can find more information on them and the differences here: when to use a service instead of a factory

edited May 23 '17 at 12:22

Community

1
1

answered Apr 22 '15 at 17:05

konkked

3,161
14
19

Erik Svedin · Answer 3 · 2015-04-22T17:27:42.460

As others have already stated this is best done via an external service.

Created a plunk where a service is used for get/set and also notifys controllers via the $rootScope.$broadcast as an event bus.

Note that I've only made it work for the kids

http://plnkr.co/edit/hKKwSvCKLZ4SVjkfTE5b?p=preview

angular.module('Cross.Controller.demo',[]);

angular.module('Cross.Controller.demo').service('Results', function ($rootScope) {
   var expenses = {
     kids:0,
     house:0
   }
   
   return {
     setKidsExpenses: function(cost){ 
       expenses.kids = cost;
       $rootScope.$broadcast('updatedCosts');
     },
     addHouseExpenses: function(cost){ expenses.house += cost  },
     getExpenses: function(){ return expenses }
   }
});

angular.module('Cross.Controller.demo').controller('KidsCtrl', function ($scope, Results) {
   $scope.Kids = [
    {"Name":"John", "Expense":"1000"}, 
    {"Name":"Anna", "Expense":"900"}];
    
    $scope.$watch('Kids', function(){
      var kidsExpenses = 0;
      for(var i = 0; i < $scope.Kids.length; i++){
        kidsExpenses += parseInt($scope.Kids[i].Expense)
      }
      
      Results.setKidsExpenses(kidsExpenses)
      
    }, true)
});

angular.module('Cross.Controller.demo').controller('HouseCtrl', function ($scope) {
   $scope.House =  {"Category":"Utilities", "Expense":"2000"};
});

angular.module('Cross.Controller.demo').controller('ResultCtrl', function ($scope, Results) {

  $scope.$on('updatedCosts', function(){
    var expenses = Results.getExpenses()
    var totalExpenses = expenses.kids + expenses.house;
    $scope.Result =  {"Category":"Total", "Expense":totalExpenses};
  })
  
});

<!doctype html>
<html ng-app="Cross.Controller.demo">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="script.js"></script>
<body>
  <div ng-controller="KidsCtrl">
    <div ng-repeat="kid in Kids">
      {{kid.Name}}
      <input type="text" ng-model="kid.Expense">
    </div>
  </div>
  
  <div ng-controller="HouseCtrl">
    {{House.Category}}
    <input type="text" ng-model="House.Expense">
  </div>
  
  <div ng-controller="ResultCtrl">
    {{Result.Category}}
    <input type="text" ng-model="Result.Expense">
  </div>
</body>
</html>

Angularjs - Cross Controller Calculation

3 Answers3