CODEWITHSUNDEEP
angularjs
James-Jesse Drinkard
James-Jesse Drinkard

Reputation: 15703

Angularjs TypeError: is not a function issue

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.

Upvotes: 0

Views: 3447

Answers (3)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

.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.

Upvotes: 1

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

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.

Upvotes: 0

Fetrarij
Fetrarij

Reputation: 7326

wrong service code, should be:

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

Upvotes: 3

Related Questions