交叉控制器计算
我正在尝试用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>把它全部放入一个服务，并呼吁服务的一切。
编辑：看到更新的plnk。 所有这一切说，你现在需要在服务中发生这些变化时通知控制器。 在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();
});
你最好的选择是使用服务或工厂
你可以在这里找到更多关于它们的信息和差异：何时使用服务而不是工厂
正如其他人已经表示，这最好通过外部服务完成。
创建一个plunk，其中服务用于获取/设置，并通过$rootScope.$broadcast作为事件总线提供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>上一篇: Cross Controller Calculation
下一篇: Changing $scope variable value in controller not changing value on view