6

我对 AngularJS 很陌生，所以我可能问了一个完全错误的问题。我想要完成的是在单个应用程序中创建一个具有数据绑定的可重用类。下面通过一个非常简单的示例演示了我要完成的工作。

假设我想创建一个带有值和增量方法的计数器。我可以创建一个服务并在控制器中使用它，如下所示：

angular.module("fiddle", ["counter"])
.controller("MainCtrl", function($scope, counter) {
    $scope.counter = counter;
});

angular.module("counter", [])
.service("counter", function() {
    this.count = 0;
    this.increment = function(x) {
        this.count += x;
    };
});

然后我可以显示一个视图来添加一个计数器：

<h1>Count: {{counter.count}}</h1>
<button ng-click="counter.increment(1)">Add 1</button>
<button ng-click="counter.increment(5)">Add 5</button>
<button ng-click="counter.increment(10)">Add 10</button>

这适用于一个计数器，但如果我想在同一个控制器中有多个计数器怎么办？由于服务是单例的，我不能这样做。鉴于其他服务会更复杂，使用 Angular 创建这样的东西的最佳方法是什么？谢谢！

http://jsfiddle.net/jeffaudio/ExASb/

4

2 回答 2

9

要使服务不像单例，您可以这样做：

angular.module("counter", [])
.service("counter", function() {
    var aCounter = function() {
        this.count = 0;
        this.increment = function(x) {
            this.count += x;
        };
    }
    return {
        getInstance: function () {
          return new aCounter();
        }
    };
});

然后从您的控制器管理您的计数器，例如：

function myCtrl($scope, counter) {
    $scope.counter1 = counter.getInstance();
    $scope.counter2 = counter.getInstance();
}

http://jsfiddle.net/KLDEZ/

于 2013-08-05T16:04:22.290 回答
2

使您的服务支持多个计数器：

angular.module("counter", [])
.service("counter", function() {
    // Counters is our object which service encapsulates
    this.counters = {};
    this.increment = function(name, x) {
        // If such counter is not set, set it.
        if (!this.counters[name]) { this.counters[name] = 0; }
        this.counters[name] += x;
    };
});

进而：

<button ng-click="counter.increment('count1', 1)">Add 1</button>
<button ng-click="counter.increment('count2', 5)">Add 5</button>
<button ng-click="counter.increment('count3', 10)">Add 10</button>

并将视图绑定到您想要的任何计数器...

于 2013-08-05T15:55:13.757 回答