angularjs - 多个柜台服务

Question

我有点卡在一个项目上(对 AngularJS 很陌生)。现在，我的 HTML 是:

<button ng-click="decrement()" class="min">-</button>
<input ng-model="counter" type="text" size="1">
<button ng-click="increment()" class="plus">+</button>

和我的(工作)JS:

ngToggle.controller('ExampleController', ['$scope', function($scope) {
$scope.image=1;
$scope.decrement=function() {
    if ($scope.counter>1) {$scope.counter--;}       
};
$scope.increment=function() {
    $scope.counter++;
}
}]);

这将创建一个带有 + 和 - 按钮的简单计数器。我现在的情况是我想要多个独立的柜台。在我看来，计数部分可以通过服务轻松处理，因此我不必重复。但是这里正确的方法是什么？

Answer 1

显然，您的问题很开放，将会有很多答案可以帮助您。我模拟了一个简单的示例，其中服务处理多个计数器的递增和递减 - 它可能不适合您的确切场景，但希望它能展示如何可以使用服务。 p>

http://jsfiddle.net/Lvc0u55v/3763

function counterService() {
    var counters = [0, 0, 0, 0];

    return {
        getCounters: getCounters,
        decrement: decrement,
        increment: increment
    };

    function getCounters() {
        return counters;
    }

    function increment(i) {
        if (angular.isDefined(counters[i]))
            counters[i]++;
    }

    function decrement(i) {
        if (angular.isDefined(counters[i]))
            counters[i]--;
    }
}

这就是服务。您需要做的就是，计数器的状态存在于服务中，并且与它们交互的功能也由服务提供。