javascript - 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 放入 Controller (见下文)或此 codepen 时，我可以使用此功能。 。

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

如何实现这一目标？

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 。您没有像在另一个代码片段中那样计算任何内容，在另一个代码片段中您正在计算 Controller 中的所有内容。因此，不要只返回付款，而是在 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;
});