Angularjs TypeError: is not a function issue

Question

I have a select that calls a controller in a directive, that in turn calls a function from a service when the user selects a value in the dropdown list. For some reason I'm getting this error:

TypeError: myService.getMessage is not a function

So I created a plunker to pull out the basic functionality and I was able to duplicate the error using a controller to call a basic service, but I'm still not solving it yet.

Here is the code:

HTML Code:

    <!DOCTYPE html>
    <html ng-app="app">

      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script data-require="[email protected]" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
        <script src="script.js"></script>
      </head>

      <body ng-controller="MainCtrl">
        <select ng-options="option for option in listOfOptions" 
                ng-model="selectedItem"
                ng-change="selectedItemChanged()">
        </select>

        <p>This is the selected Item from the model: <b>{{selectedItem}}</b></p>
        <p>This is the result of the ng-change function: <b>{{calculatedValue}}</b></p>

  </body>

Script Code:

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

app.controller('MainCtrl', function($scope, myService) {
  $scope.listOfOptions = ['One', 'Two', 'Three'];

  $scope.selectedItemChanged = function(){
    $scope.calculatedValue = 'You selected number ' + $scope.selectedItem;
    //Call the service.
    myService.getMessage();
  }
});

app.service('myService', function(){
  function getMessage(){
    alert("You are in myService!");
  }
});

I've seen lots of different, much more complicated code for this type of error, but I'm not understanding what is causing this? Any ideas as to the proper way to do this?

What I'm trying to do is to use a function like myService.mySearch(param1) from a controller or directive.

Fetrarij · Accepted Answer · 2017-05-05 06:59:56Z

3

wrong service code, should be:

app.service('myService', function() {
  this.getMessage = function() {
    alert("You are in myService!");
  }
});

answered May 5, 2017 at 6:59

Fetrarij

7,3463 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohìt Jíndal · Accepted Answer · 2017-05-05 08:08:55Z

1

.service() is a function which takes a name and a function that defines the service.It acts as a constructor function.We can inject and use that particular service in other components : controllers, directives and filters.

Correct Syntax :

app.service('myService', function(){
  this.getMessage = function(){
    alert("You are in myService!");
  }
});

Main thing is that service is a constructor function. Hence, we can work with this keyword. In background, this code calls Object.create() with the service constructor function, when it gets instantiated.

answered May 5, 2017 at 8:08

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

3 Comments

James-Jesse Drinkard Over a year ago

Thank you! So if I'm calling a function in a service, which was the intent, like function mySearch(param1) {this.mySearch = function(param1){//do something}} why doesn't this work?

Rohìt Jíndal Over a year ago

It should work app.service('myService', function(){this.mySearch = function(param1){//do something}});

James-Jesse Drinkard Over a year ago

No, I didn't explain it properly. That does work, but when I call my service from the controller in my commercial code, outside of the plunker, I still get the original error.

tanmay · Accepted Answer · 2017-05-05 07:06:17Z

0

In addition to Fetra R 's answer,

Factory is mostly preferable in all cases. It can be used when you have constructor function which needs to be instantiated in different controllers. Service is a kind of Singleton Object. The Object return from Service will be same for all controller.

So as it is like a singleton object, you have to declare it as The Fetra R's Answer, or You may write a factory.

app.factory('myService', function() {
  return {
    getMessage: function() {
      alert("You are in myService!");
    }
  }
});

and use it in the same manner.

edited May 5, 2017 at 7:06

tanmay

7,9112 gold badges23 silver badges39 bronze badges

answered May 5, 2017 at 7:04

Tirthraj Barot

2,6792 gold badges19 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angularjs TypeError: is not a function issue

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related