Angular JS申请服务

Question

按照最佳实践，我正在尝试将全局功能包装到可重用的工厂服务中。 在下面的代码中，我试图运行一个函数，该函数将在我的JSON数据中使用字符串值“ Qprogress”，对其进行一些数学运算，然后将输出附加到具有“ percent”类的元素上。 我该怎么做？

HTML：

    <table class="table table-striped table-condensed" ng-controller = "clientStatus">
      <thead>
        <tr>
          <th>Client</th>
          <th>Status</th>
          <th>Icon</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in clients">
          <td><a href="#/details/{{clients.indexOf(item)}}" title="Link to {{item.FirstName}} {{item.LastName}}" class="oly-open">{{item.FirstName}} {{item.LastName}}</a></td>
          <td ng-hide="item.Progress == 'In Progress'" ng-class="{ 'status-success': item.Progress == 'Questionnaire Completed', 'status-error': item.Progress == 'Unsent'}">{{item.Progress}}</td>
          <td ng-if="item.Progress == 'In Progress'" class="status-info percent" ng-init="progressCalc(item)"></td>
          <td width="10%"><a href="#/reports/" title{{$index + 1}}="Reports" ng-show="{{item.Progress == 'Questionnaire Completed'}}"><span class="stat-icon-report"></span></a> <a href="#/sends/{{$index + 1}}" title="Alert" ng-show="{{item.Progress == 'Unsent'}}"><span class="stat-icon-bullhorn"></span></a> <a href="#/progress/{{$index + 1}}" title="In Progress" ng-show="{{item.Progress == 'In Progress'}}"><span class="stat-icon-phone"></span></a></td>
        </tr>
      </tbody>
    </table>

AngularJS：

    var myApp = angular.module('myApp', []);

    myApp.factory('progressCalc', function() {
      angular.forEach(function(item) {
        var m = 0.26664;
        var s = 0.26664;
        var i = 0.694375;
        var t = item.Qprogress;
        t = t.replace(/m/g, '');
        t = t.replace(/s/g, '');
        t = t.replace(/i/g, '');
        var ta = t.split("/");
        var tTotal = (ta[0] * m) + (ta[1] * s) + (ta[2] * i);
        Math.round(tTotal);
        (tTotal + '%').append('.percent');
      });
    });
    myApp.controller('clientStatus', ['$scope', '$http', function($scope, $http) {
      $http.get('assets/js/lib/angular/clientList.json').success(function(data) {
        $scope.clients = data;

      });
    }]);

JSON片段：

    {
      "FirstName": "Jane",
      "LastName": "Greenberg",
      "Company": "Nike",
      "CompanyId": "2345672",
      "ClientId": "EFTGE6",
      "Title": "CIO",
      "Phone": "555-555-5555",
      "ClientSystemStatus": "Active",
      "CreationDate": "06/12/2015, 9:12:27 am",
      "Progress": "In Progress",
      "Qprogress": "m125/s108/i0",
      "Email": "jgreenberg@nike.com"
    }

我以为我可以将代码包装在一个函数中，然后在要附加的元素上进行ng-init，但这并不起作用。

Answer 1

您的factory应返回可重复使用的零件，该零件将在controller 。 计算在factory而控制器仅调用它并将其传递给DOM （在您的情况下， 它应该是一个更好的目录 ）。

//we define the factory, it will return on method 'doMath'
myApp.factory('progressCalc', function() {
return {
    doMath: function(data) {
        //here we will store the results
        var values = [];

        angular.forEach(function(data) {
            var m = 0.26664;
            var s = 0.26664;
            var i = 0.694375;
            var t = item.Qprogress;
            t = t.replace(/m/g,'');
            t = t.replace(/s/g,'');
            t = t.replace(/i/g,'');
            var ta = t.split("/");
            var tTotal = (ta[0] * m) + (ta[1] * s) + (ta[2] * i);
            Math.round(tTotal);

        values.push(tTotal + '%');

        });
        //here give the results back to controller
            return values;
        }
    }
});

//your controller
myApp.controller('clientStatus', ['$scope', '$http', 'progressCalc', function($scope, $http, progressCalc) { 

    //...other stuff

    $http.get('assets/js/lib/angular/clientList.json').success(function(data) { 

        //here we have the data
        //and call progressCalc factory
        $scope.clients = progressCalc.doMath(data);

      //here you can do smth like

      $scope.clients.forEach(function(item){
        item.append('.percent')
      });
    });

});

Answer 2

另外，在您的函数中，您可能需要进行一些更改（请参阅第一个答案）

angular.forEach(function(data) {

应该

angular.forEach(data, function(item) {
...
tTotal = Math.round(tTotal);
...