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

问题描述:

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

有什么我失踪让操作正确吗?

这是我用我的整个服务:

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: '[email protected]', active: true, personId: 0 }, 
    { name: 'Susie', dob: '03/01/2005', cell: '3035551313', carrier: 'SPRINT', email: '[email protected]', 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我认为这是在angular.injector语句修改一个plunkr的:

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

正如我收到类似的行为在plunkr,因为我有我的代码。

更新#2:

感谢Camden_kid你为我这么远......

我觉得到多个服务电话,因为我与jQuery和角混合的我已经收窄。

我有这段代码,当我与添加杂项和人物时生成的动态开关交互时,我可以捕获该代码。

$(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函数吗?

+0

@camden_kid以及我只在添加新项目时测试了它。它从3变为2. – webdad3 2015-04-05 20:40:12

+0

@camden_kid - 我不知道。我从一个例子中得到了这段代码。它返回数组。但只是最初加载的值。没有任何新的。 – webdad3 2015-04-05 21:23:48

我已经创建了一个基于代码的简化应用程序,工作正常 - 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> 

EDIT1:关于你的更新问题和评论这条线:

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

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

编辑2:这是根据你的Plunker工作Plunker。 :-)

+0

我更新了我的问题,以显示我在jQuery中使用角度注入线来获取数组。 – webdad3 2015-04-06 11:30:20

+0

当我添加注射器代码时,我能够调用该函数,但数组长度返回0 ...非常相似的行为。这是PLUNK的分叉版本: http://plnkr.co/edit/fxOaJdsVk9Tb7rrEwPrB?p=preview – webdad3 2015-04-06 11:40:15

+0

这是有道理的。无论如何,我可以按照我想要的方式做到这一点,因为在我的代码中有很多可以按下的按钮。有些人使用Angular,而这恰好是使用jQuery。我希望远离现在可用的东西。就是想。 – webdad3 2015-04-06 12:21:10