AngularJS 使用工厂计算对象的变化

Question

我想制作一个简单的工资计算器，以便您拥有员工列表及其当前费率和小时数，您可以操纵工资率和小时数来计算出哪些员工的成本最高。

我有以下内容，包含在此 codepen 中。

我试图将我的所有逻辑都保留在工厂中，但是尽管我知道员工模型正在更新，但我无法通过此方法更新薪酬模型。

<div ng-app="app">
        <div ng-controller="MainCtrl">
          <table>
            <tr><td>name</td><td>rate</td><td>hours</td></tr>
            <tr ng-repeat="s in staff">
                <td>{{s.name}}</td>
                <td><input ng-keyup="keyPress(s.rate)" ng-model="s.rate"></td>  
                <td><input ng-keyup="keyPress(s.hours)" ng-model="s.hours"></td>
            </tr>
            </table>
          <table>
            <tr><td>name</td><td>pay</td></tr>
            <tr ng-repeat="b in CalcPay">
                <td>{{b.1.name}}</td>
                <td>{{b.1.pay}}</td>
            </tr>
            </table>          
    </div>
</div>
<script>
var app = angular.module('app', []);
app.factory('staffFactory', function ($http, $compile, $rootScope, $controller) {
    var staff = [
        {"id": "1","name": "Kate","rate": "10", "hours": "10"},
        {"id": "2","name": "John","rate": "20", "hours": "10"},
        {"id": "3","name": "Matt","rate": "15", "hours": "10"}
    ];

    var unique = {},
        distinct = [];
    for (var i in staff) {
        if (typeof (unique[staff[i].id]) == "undefined")  {
            distinct.push(staff[i].id);
        }
        unique[staff[i].id] = unique[staff[i].id] || {pay:0};
        unique[staff[i].id].name = staff[i].name;
        unique[staff[i].id].pay += (parseInt(staff[i].rate, 10) * parseInt(staff[i].hours, 10));
    }

    var pay = [];
    for (var p in unique) {
        pay.push([p, unique[p]]);
        pay.sort(function (a, b) {
            return (b[1].pay - a[1].pay);
        });
    }

    var staffService = {};
    staffService.allStaff = function () {
        return staff;
    };

    staffService.CalcPay = function () {
        return pay;
    };

    return staffService;
});

app.controller('MainCtrl', ['$scope', 'staffFactory', function ($scope, staffFactory) {
    $scope.staff = staffFactory.allStaff();
    $scope.CalcPay = staffFactory.CalcPay();
    $scope.keyPress = function(keyCode){
        console.log($scope.staff);
        $scope.CalcPay = staffFactory.CalcPay();
    };    
}]);
</script>

当我将我的 CalcPay 放入控制器（见下文）或此 codepen 时，我可以正常工作。

我读到的所有内容似乎都表明这不是最佳实践并且会减慢应用程序的速度，因此我正在寻找一种方法来完成此操作而不依赖控制器中的功能？

如何实现？

app.controller('MainCtrl', ['$scope', 'staffFactory', function ($scope, staffFactory) {
    $scope.staff = staffFactory.allStaff();
  function CalcPay () {
      var unique = {},
        distinct = [];
    for (var i in $scope.staff) {
        if (typeof (unique[$scope.staff[i].id]) == "undefined")  {
            distinct.push($scope.staff[i].id);
        }
        unique[$scope.staff[i].id] = unique[$scope.staff[i].id] || {pay:0};
        unique[$scope.staff[i].id].name = $scope.staff[i].name;
        unique[$scope.staff[i].id].pay += (parseInt($scope.staff[i].rate, 10) * parseInt($scope.staff[i].hours, 10));
    }

    var pay = [];
    for (var p in unique) {
        pay.push([p, unique[p]]);
        pay.sort(function (a, b) {
            return (b[1].pay - a[1].pay);
        });
    }
  return pay;
  };
    $scope.CalcPay = CalcPay();
    $scope.keyPress = function(keyCode){
        $scope.CalcPay = CalcPay();
    };    
}]);

Answer 1

问题是当你调用工厂的 CalcPay 方法时，该方法只是返回一个值 pay 。你没有像在另一个代码 sn-p 中那样计算任何东西，你在控制器中计算所有东西。因此，不要只返回支付，而是将所有计算逻辑保留在 CalcPay 中，或者将所有逻辑保留在其他函数中并从 CalcPay 中调用。

var app = angular.module('app', []);
app.factory('staffFactory', function ($http, $compile, $rootScope, $controller) {
    var staff = [
        {"id": "1","name": "Kate","rate": "10", "hours": "10"},
        {"id": "2","name": "John","rate": "20", "hours": "10"},
        {"id": "3","name": "Matt","rate": "15", "hours": "10"}
    ];

    function calcPayInner(){
    var unique = {},
        distinct = [],pay = [];
    for (var i in staff) {
        if (typeof (unique[staff[i].id]) == "undefined")  {
            distinct.push(staff[i].id);
        }
        unique[staff[i].id] = unique[staff[i].id] || {pay:0};
        unique[staff[i].id].name = staff[i].name;
        unique[staff[i].id].pay += (parseInt(staff[i].rate, 10) * parseInt(staff[i].hours, 10));
    }

        for (var p in unique) {
        pay.push([p, unique[p]]);
        pay.sort(function (a, b) {
            return (b[1].pay - a[1].pay);
        });
    }
    }
    var staffService = {};
    staffService.allStaff = function () {
        return staff;
    };

    staffService.CalcPay = function () {
        return calcPayInner();
    };

    return staffService;
});