angular.注射器阵列值未返回当前值

angular.injector array value not returning current values

本文关键字：返回 阵列 angular 注射器      更新时间：2023-09-26

在我的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"实例。对于每个人/家务组合，这一行每次都会有效地重新生成。

是否有1个"myService"引用，但能够调用returnChoreList函数？

我已经根据您的代码创建了一个简化的应用程序，它运行良好-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")

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

第二版：这是一个基于你的Plunker的工作Plunker。：-）

相关文章：