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 - 交叉控制器計算

回答

相關問題