Angularjs - 交叉控制器计算

我正在尝试用Angularjs创建一个应用程序，这是一个相当大的应用程序，需要将其分解为多个控制器。我需要跨控制器进行计算。Angularjs - 交叉控制器计算

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>

请找我Plunk这里。

我想从孩子和开销的房子既增加开支的结果控制器的“Result.Expense”

来源

2015-04-22 Jay

工作如何创建服务/工厂对象，并具有三个与服务交互执行你的计算？ – Chris

把所有的东西都放到一个服务中，然后调用服务来处理所有事情。

编辑：查看更新plnk。所有这一切说，你现在需要在服务中发生这些变化时通知控制器。查看我的回答here关于在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(); 
});

来源

2015-04-22 17:07:11 Tom

它必须是动态的。当孩子和房子的费用改变时。我们需要更新结果。 – Jay

因此，在服务中放置一个'setKids（）'或'addKids（）'或'updateKids（）'，并做任何你必须做的事情。然后按照我发布的链接使用[观察者模式]（http://en.wikipedia.org/wiki/Observer_pattern），并在更新孩子时通知控制器。 – Tom

最好的办法是使用服务或工厂

你可以找到更多关于它们的信息以及这里的区别：when to use a service instead of a factory

来源

2015-04-22 17:05:22 konkked

正如其他人已经声明这最好通过外部服务完成。

通过$rootScope.$broadcast作为事件总线创建了一个plunk，其中服务用于get/set以及notifys控制器。

请注意，我只是做它为孩子们

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>

来源

2015-04-22 17:17:49

Angularjs - 交叉控制器计算

回答

相关问题