Angular JS应用服务

Angular JS Applying Service

本文关键字：应用服务 JS Angular      更新时间：2023-09-26

根据最佳实践，我正在尝试将我的全局函数包装到可重用的工厂服务中。在下面的代码中，我尝试运行一个函数，该函数将在我的 JSON 数据中获取"Qprogress"的字符串值，对其运行一些数学运算并将输出附加到具有"百分比"类的元素。我怎样才能做到这一点？

.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，但这不想工作。

您的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')
      });
    });
});

同样在您的函数中，您将需要进行一些更改(请参阅第一个答案(，可能

angular.forEach(function(data) {

应该是

angular.forEach(data, function(item) {
...
tTotal = Math.round(tTotal);
...
相关文章：