在我的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函数吗?
答案 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。 : - )