0

我的控制器中有一个函数，我正在尝试将其重写为服务。

该函数读取从 HTML 传入的值的长度（从 1 到 12）。如果传入的值少于 12 个，该函数会计算少了多少并将剩余的数字显示为空单元格。

HTML：

<div ng-app="">
<div ng-controller="EventController">
    <table>
        <tr ng-repeat="country in Countries">
            <th>{{country.countryName}}</th>
            <td ng-repeat="countryDetails in country.Details.slice(0, 12)">{{ countryDetails }}m</td>
            <td ng-repeat="emptyCell in getEmptyCells(country.Details.length)" class="empty">empty</td>
        </tr>
    </table>
    <br>
    <table>
        <tr ng-repeat="country in Countries">
            <th>{{country.countryName}}</th>
            <td ng-repeat="countryDetails in country.Details.slice(12, 24)">{{ countryDetails }}m</td>
            <td ng-repeat="emptyCell in getEmptyCells(country.Details.length)" class="empty">empty</td>
        </tr>
    </table>
    <br>
    <table>
        <tr ng-repeat="country in Countries">
            <th>{{country.countryName}}</th>
            <td ng-repeat="countryDetails in country.Details.slice(24, 36)">{{ countryDetails }}m</td>
            <td ng-repeat="emptyCell in getEmptyCells(country.Details.length)" class="empty">empty</td>
        </tr>
    </table>
</div>
</div>

我的 JS 函数：

$scope.getEmptyCells = function (len) {
    var emptyCells = [];
    for (var i = 0; i < 12 - len; i++) {
        emptyCells.push(i);
    }
    return emptyCells;
}

我的新服务：

app.factory('EmptyCellsService', function() {
return {
    getEmptyCells: function(len) {
        var emptyCells = [];
        for(var i = 0; i < 12 - len; i++){
            emptyCells.push(i);
        }
        return emptyCells;
    }
 };
 });

我从控制器调用新服务：

$scope.getEmptyCells = EmptyCellsService.getEmptyCells();

但是，空单元格不再显示。

这是我的工作小提琴（使用函数时（服务代码已注释掉）：http: //jsfiddle.net/oampz/GkarV/367/

4

3 回答 3

2

看到这个更新的小提琴。

你应该用过

$scope.getEmptyCells = EmptyCellsService.getEmptyCells;

代替

$scope.getEmptyCells = EmptyCellsService.getEmptyCells();
于 2014-06-04T08:59:24.213 回答
1

我对你的代码做了一些修改

  1. 给 ng-app 一个值 ( <div ng-app="app">)
  2. 使用服务创建了模块“应用程序” - EmptyCellsService（实际上这是工厂而不是服务）

angular.module("app",[]).factory('EmptyCellsService',

  function() {
                return {
                    getEmptyCells: function(len) {

                    var emptyCells = [];
                    for(var i = 0; i < 12 - len; i++){
                        emptyCells.push(i);
                    }
                    return emptyCells;
                }
             };
         });

3.改变EventController如下

function EventController($scope,EmptyCellsService) {
    $scope.Countries = [{
        countryName: "USA",
        Details: [1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.0, 11.0, 12.0,
        13.0, 14.0, 15.0, 16.0, 17.0, 18.0, 19.0, 20.0, 21, 22, 23, 24,
        23.0, 24.0, 25.0, 26.0, 27.0, 28.0, 29.0, 30.0, 31, 32, 33, 34]
    }, {
        countryName: "UK",
        Details: [3.3, 4.4, 5.5, 6.6]
    }, {
        countryName: "Russia",
        Details: [7.7, 8.8, 9.9, 10.0]
    }];

    $scope.getEmptyCells = EmptyCellsService.getEmptyCells;


}
于 2014-06-04T09:00:00.343 回答
1

首先，您要从函数调用中分配返回值，这不是您想要的，您可以只保存对该函数的引用。

$scope.getEmptyCells = EmptyCellsService.getEmptyCells

其次，您的控制器函数对 EmptyCellsService 一无所知，因为您没有注入依赖项。您可以将参数传递给构造函数：

function EventController($scope, EmptyCellsService) { ...

app.factory最后但并非最不重要的一点是，在提供的小提琴上，即使没有在任何地方定义，您也可以调用app...您应该首先创建模块：

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

并将您的 html 绑定到该模块：

<html ng-app="app"


工作小提琴：http: //jsfiddle.net/GkarV/370/

于 2014-06-04T09:05:18.810 回答