Question

我有一个select，它在一个指令中调用一个控制器，当用户在下拉列表中选择一个值时，该指令又从一个服务调用一个函数。出于某种原因，我收到了这个错误：

TypeError：myService.getMessage不是函数

所以我创建了一个plunker来提取基本功能，我能够使用控制器复制错误来调用基本服务，但我还没有解决它。

以下是代码：

HTML代码：

    <!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="angular.js@1.2.x" 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>

脚本代码：

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

我已经看到了许多针对此类错误的不同，更复杂的代码，但我不明白导致这种情况的原因是什么？有关正确方法的任何想法吗？

我尝试做的是使用来自控制器或指令的myService.mySearch（param1）等函数。

Answer 1

错误的服务代码，应该是：

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

Answer 2

.service()是一个函数，它接受定义服务的name和function。它充当构造函数。我们可以在其他组件中注入和使用该特定服务： controllers，directives和filters。

更正语法：

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

主要的是service是构造函数。因此，我们可以使用this关键字。在后台，此代码在实例化时会使用服务Object.create()调用constructor function。

Answer 3

除了Fetra R的回答，

工厂在所有情况下都是最优选的。当你有构造函数需要在不同的控制器中实例化时，可以使用它。服务是一种Singleton对象。对于所有控制器，从服务返回的对象将是相同的。

因为它就像一个单身对象，你必须将它声明为The Fetra R的答案，或者你可以写一个工厂。

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

并以同样的方式使用它。

Angularjs TypeError：不是函数问题

3 个答案: