CODEWITHSUNDEEP
javascriptangularjsionic-framework
Kuba Chour
Kuba Chour

Reputation: 559

Angular: Not able to reach method from scope

I'm trying to use method from my $scope controller, imported from Factory and execute it on onlick method in Ionic based HTML.

I am still getting undefined and I don't know why, because any other variables from $scope are available (like userid). Is this scope hierarchy problem? I read through many articles, but I'm still stuck. Thanks.

Controller:

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!');
  };
});

Factory:

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);
      }
   }

  }

 }

});

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 >

Upvotes: 1

Views: 61

Answers (1)

Kuba Chour
Kuba Chour

Reputation: 559

There is mistake in HTML part, I use onclick method, when it should be ng-click.

ng-click="saveName(name, 'list1', 'list2')"

Thanks

Upvotes: 1

Related Questions