Angularjs service method not getting called, TypeError: Cannot read property '

I am new to angularJs. I am havin problem in calling a method from service.

Here is my controller (app.js)

angular.module('starter', ['ionic','ngCordova','NameService'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.controller('SmsCtrl', ['$scope','$ionicPlatform','$cordovaSms', function ($scope, $ionicPlatform, $cordovaSms, getName) {
  console.log('enetered in ctrl');
  $scope.form={}
$scope.counter=contactCount;

$scope.doContactPicker=function() {
console.log(getName);
//$scope.answer='answer';
$scope.answer =getName.nameFetched('yatin data');

 /*$scope.$watch('answer', function() {
        document.getElementById("contactFetched").innerHTML =$scope.answer;
alert('sample alert displayed');
 });*/

};

I have created a basic service to just return the name passed to it as argument. Here is my service(services.js)

var nameService=angular.module('NameService',[]);



nameService.service('getName',function() {
console.log("service created");
 this.nameFetched=function getUserName(c) {
console.log("inside picked contact");
    var name =c; 
    return name;
}
});

And finally in my view(Index.html), I am just calling the function and displaying the content with some console statements.

<button class="button button-bar button-balanced" ng-click="doContactPicker()">Pick Contact</button>

Now the error I am getting is :-

undefined

ionic.bundle.js:21157 TypeError: Cannot read property 'nameFetched' of undefined
    at Scope.$scope.doContactPicker (http://192.168.0.126:8100/js/app.js:30:23)
    at fn (eval at <anonymous> (http://192.168.0.126:8100/lib/ionic/js/ionic.bundle.js:21972:15), <anonymous>:4:236)
    at http://192.168.0.126:8100/lib/ionic/js/ionic.bundle.js:57514:9
    at Scope.parent.$get.Scope.$eval (http://192.168.0.126:8100/lib/ionic/js/ionic.bundle.js:24673:28)
    at Scope.parent.$get.Scope.$apply (http://192.168.0.126:8100/lib/ionic/js/ionic.bundle.js:24772:23)
    at HTMLButtonElement.<anonymous> (http://192.168.0.126:8100/lib/ionic/js/ionic.bundle.js:57513:13)
    at HTMLButtonElement.eventHandler (http://192.168.0.126:8100/lib/ionic/js/ionic.bundle.js:12098:21)
    at triggerMouseEvent (http://192.168.0.126:8100/lib/ionic/js/ionic.bundle.js:2865:7)
    at tapClick (http://192.168.0.126:8100/lib/ionic/js/ionic.bundle.js:2854:3)
    at HTMLDocument.tapMouseUp (http://192.168.0.126:8100/lib/ionic/js/ionic.bundle.js:2927:5)(anonymous function) @ ionic.bundle.js:21157ident.$get @ ionic.bundle.js:17936parent.$get.Scope.$apply @ ionic.bundle.js:24774(anonymous function) @ ionic.bundle.js:57513eventHandler @ ionic.bundle.js:12098triggerMouseEvent @ ionic.bundle.js:2865tapClick @ ionic.bundle.js:2854tapMouseUp @ ionic.bundle.js:2927

undefined at the top of the error statements is for

console.log(getName);

I have checked the syntax and how to create services many times now and still not able to figure out the reason for this. Kindly help me figure this out.

Answers


In your controller, you are not injecting getName service properly

Following will work

.controller('SmsCtrl', ['$scope','$ionicPlatform','$cordovaSms', 'getName', function ($scope, $ionicPlatform, $cordovaSms, getName)

You must inject your service by name in controller at which you want to use it and the use this name as object

.controller('SmsCtrl', ['$scope','$ionicPlatform','$cordovaSms','getName', function ($scope, $ionicPlatform, $cordovaSms, getName) {
    console.log(getName);
}

Need Your Help

How to modularize the URL handling functions?

python python-2.7 flask pyramid webapp2

With Python web application frameworks such as Flask, webapp2 and Pyramid, how can each route-handling-function can have its own py file? I don't want all these functions piled up together in a sin...

How to dynamically set a menu item class name with MVC4?

css asp.net-mvc-4 twitter-bootstrap-3

For a new application we are using Bootstrap v3.0, which has the navigation menu defined as follows: