I am attempting to utilize a method from my $scope controller, which is imported from a Factory, and execute it using the onclick method in an Ionic-based HTML.
However, I am encountering the issue of getting undefined and I am unsure of the reason behind it, as other variables from $scope (like userid) are accessible. Could this be a scope hierarchy problem? Despite reading numerous articles, I am still stuck. Thank you for any assistance.
Here is the Controller code:
var mod = angular.module('Baybee.controller.nameList', []);
mod.controller('NameListCtrl', function ($scope, AllNamesList, UidGenerator, $localstorage) {
//importing list of names from Factory and unique user-id
$scope.namesFromService = AllNamesList.getList('AllNamesList');
$scope.userid = UidGenerator;
// test functions which I wasn't able to execute on 'onclick' method. scope.saveName should be that I wanted to use originaly
$scope.saveName = AllNamesList.transferName;
$scope.testb = function () {
console.log('working!');
};
});
And here is the Factory code:
var mod = angular.module('Baybee.factory.allNamesList',['ionic'])
.factory('AllNamesList', function($localstorage) {
// 3 more list available as variables, here is just one
var AllNamesList = {
names: [
{
"name": "Jakub",
"set": [
"CzechCalendar",
"Top10Cz2015",
"Top50Cz2010"
],
"properties": {
"sex": "male",
"origin": "Hebrew",
"description": "Comes from Hebrew, יַעֲקֹב (Yaʿqob, Yaʿaqov, Yaʿăqōḇ)"
},
"popularity": [
{
"Cz": {
"2011": "10",
"2012": "7",
"2013": "6",
"2014": "6",
"2015": "7"
}
}
]
}
// more names here
]
};
return {
// returns right list with names based on string argument
getList: function(a) {
switch (a) {
case "AllNamesList":
return AllNamesList;
break;
case "loveNameList":
return loveNameList;
break;
case "maybeNameList":
return maybeNameList;
break;
case "noGoNameList":
return noGoNameList;
break;
default:
console.log("Sorry, can't find list with names");
}
},
// I would like to use this function on onlick method to transfer object with name properties to the right list (
transferName: function(name, listFrom, listTo){
// saving both list names into local memory
for (i = 0; i < listFrom.length; i++) {
if (name = listFrom[i]) {
listTo.push(listFrom[i]);
console.log(listFrom);
listFrom.splice(i, 1);
console.log(listTo);
}
else {
console.log('Cannot find: ' + name + ' in ' + listFrom);
}
}
}
}
});
Lastly, the HTML Body:
<body ng-app="baybee">
<ion-pane ng-controller="NameListCtrl">
<ion-header-bar class="bar-energized" >
<h1 class="title" >Baybee</h1 >
</ion-header-bar >
<ion-content >
<ion-list >
<div ng-repeat="names in namesFromService track by $index">
<ion-item ng-repeat="(key, value) in names"
on-swipe-right=""
on-swipe-left=""
//I would like to execute any function from scope here, but Im getting undefined
//onclick="testb()"
//onclick="saveName(name, 'list1', 'list2')"
<h2>{{value.name}}</h2>
<p>{{value.properties.origin}}</p>
</ion-item>
</div>
</ion-list >
</ion-content >
</ion-pane >
</body >