Question

根据文档：Angular服务是单身

我正在创建一个时间跟踪项目，我想在其中添加多个任务

<ul>
    <li ng-repeat="item in data track by $index" >
        <label>Project Name</label>
        <input type="text" ng-model="item.project"/>
        <label>Start Time</label>
        <input type="text" ng-model="item.start"/>
        <label>End Time</label>
        <input type="text" ng-model="item.finish"/>
    </li>
</ul>

<a ng-click="addEntry();">Add Item</a>

这是我的控制器

controller("DashboardCtrl", ['$scope', 'Entry', function ($scope,Entry) {
        $scope.data = [];

        $scope.addEntry = function() {
            $scope.data.push(Entry);
            //$scope.data.push(new jEntry());
        }

    }])

和我的服务

.service('Entry', [function(){
        this.project = "";  
        this.start = "";  
        this.finish = "";

    }]);

我的问题是，当我使用javascript构造函数（jEntry）

时

function jEntry() {
        this.project = "";  
        this.start = "";  
        this.finish = "";
    }

用于创建新任务，它工作正常，而使用服务时所有任务的行为都与单例绑定一样。

所以我的问题是执行此任务的角度方式是什么？

DEMO

Answer 1

您可以让您的服务返回可实例化的功能。

.service('Entry', [function(){
     return function() {
          this.project = "";  
          this.start = "";  
          this.finish = "";
     }
}]);

像$scope.data.push(new Entry());

一样使用

http://plnkr.co/edit/XTRtWbv1VS5gMmkn7B7e?p=preview

虽然有点破坏了服务的目的。您也可以在控制器内执行此操作。

更好的方法是让服务跟踪条目（而不是直接将它们推入范围）

跟踪服务中的条目：

知道条目是单例，您可以将条目本身附加到单例，并添加方法来操作它们。像这样：

.service('Entry', [function(){
  var self = this;
  self.entries = [];

  this.add = function() {
    self.entries.push({
      project: "",
      start: "",
      finish: ""
    })
  }
}]);

现在，您不必将条目对象添加到范围，而是附加整个条目单例：

$scope.data = Entry;

ng-click功能将更改为data.add()。此外，您现在循环data.entries而非entries。这将允许您在保留其所有数据的同时使用其他控制器中的Entry对象。

这是一个新的傻瓜：http://plnkr.co/edit/5hs99xMQ3ZOiAWpesD5V?p=preview

现在您可以开始向Entry添加更多功能，例如，您可以添加RESTful方法来在数据库中存储添加项。或者您可能想要删除条目的方法。

角度服务的多个实例

1 个答案:

跟踪服务中的条目：