angular.injector数组值不返回当前值

时间:2015-04-05 20:09:01

标签: javascript jquery angularjs

在我的addChore函数中,我显示了要添加到的数组的长度。然后在代码中我试图获取choreList.chore数组,但我注意到它不包含我刚刚添加的所有元素。

是否有什么东西让我无法正常操作?

这是我正在使用的整个服务:

  myapp.service('myService', function () {

  var choreList = this;
  choreList.chore = [{ name: 'Take out Trash', frequency: 'Sundays', allowance: '$0.25', id: 0 },
                     { name: 'Unload Dishwasher', frequency: 'Fridays', allowance: 'Free', id: 1 }];

  var familyList = this;
  familyList.people = [
    { name: 'Johnny', dob: '01/01/2005', cell: '3035551212', carrier: 'ATT', email: 'liljohnny@test.com', active: true, personId: 0 },
    { name: 'Susie', dob: '03/01/2005', cell: '3035551313', carrier: 'SPRINT', email: 'susieq@test.com', active: true, personId: 1 }];

  choreList.addChore = function () {
      choreList.chore.push({
          name: choreList.inputChore, frequency: $('#inputFrequency').val(),
          allowance: $('#inputAllowance').val(), id: choreList.chore.length
      });

      choreList.inputChore = '';
      $('#inputFrequency').val('Mondays');
      $('#inputAllowance').val('Free');
      alert(choreList.chore.length);
  };

  this.returnChoreList = function () {
      return choreList.chore;
  }

  this.returnFamilyList = function () {
      return familyList.people;
  }

  familyList.addPerson = function () {
      //alert(familyList.inputName + ', ' + familyList.inputBirthday + ', ' + familyList.inputCellPhone, + ', ' + familyList.inputCarrier + ', ' + familyList.inputEmail);
      familyList.people.push({
          name: familyList.inputName, dob: familyList.inputBirthday,
          cell: familyList.inputCellPhone, carrier: familyList.inputCarrier,
          email: familyList.inputEmail, active: true, personId: familyList.people.length + 1
      });

      familyList.inputName = '';
      familyList.inputDOB = '';
      familyList.inputCellPhone = '';
      familyList.inputCarrier = 0;
      familyList.inputEmail = '';
      familyList.active = true;
  };

  });

当我在添加到choreList.chore之后获得长度时,我得到了最初的2个项目+我正在添加的新项目(对于此示例为3)。

但是当我调用returnChoreList函数时,我只得到2(最初的2条记录)。

有不同的方法吗?

这就是我在jQuery中调用数组的方法:

 $(document).on('switchChange.bootstrapSwitch', 'input[id^="chk"]', function (event, state) {
  var clistArr;
  clistArr = angular.injector(['ng', 'familyApp']).get("myService").returnChoreList();
  alert(clistArr.length);
});

更新 基于我从@camden_kid修改的plunkr,我认为它在angular.injector语句中:

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

因为我在使用我的代码时在plunkr中获得了类似的行为。

更新#2:

感谢Camden_kid让我走到这一步......

我认为我已将其缩小为多个服务调用,因为我混合了jQuery和Angular。

我有这个代码,当我与添加家务和人员时生成的动态开关进行交互时,我可以捕获这些代码。

$(document).on('switchChange.bootstrapSwitch', 'input[id^="chk"]', function (event, state) {

介于两者之间,我也称之为:

    var clistArr;
    clistArr = angular.injector(['ng', 'familyApp']).get("myService").returnChoreList();

根据Camden_kid的说法,我不能拥有“myService”的多个实例。每次为每个人/家务组合有效地重新生成该行。

无论如何有一个“myService”的引用但是能够调用returnChoreList函数吗?

1 个答案:

答案 0 :(得分:1)

我根据您的代码创建了一个简化的应用程序 - Plunker

JS

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

app.controller('ctrl', ["$scope", 'myService', function($scope, myService){
  var vm = this;
  vm.myService = myService;
}]);

app.service('myService', function () {
  var choreList = this;
  choreList.chore = [];

  choreList.addChore = function () {
    choreList.chore.push({a: 1});
    alert(choreList.chore.length);
  };

  this.returnChoreList = function () {
      alert(choreList.chore.length);
      return choreList.chore;
  }
});

标记

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl as vm">
  <button ng-click="vm.myService.addChore()">Add</button>
  <button ng-click="vm.myService.returnChoreList()">Return</button>
</body>
</html>

编辑1:关于您更新的问题和评论此行:

angular.injector(['ng', 'familyApp']).get("myService")

返回服务的新副本,因此数组始终是默认长度。

Edit2:这是基于你的Plunker的工作Plunker。 : - )