Angular 錯誤類型錯誤：<service-name> 不是 function</service-name>

Question

我正在編寫一個基本的登錄應用程序。 我有

./js/app.js

 'use strict'; var drfmApp = angular.module('drfmApp', [ 'ngRoute','drfmControllers' ]);

./js/controllers/LoginController.js

 'use strict'; var drfmControllers = angular.module('drfmControllers', []); drfmControllers.controller('LoginController', ['$scope','$location', function($scope,LoginService) { $scope.login = function () { console.log($scope.user.username); LoginService.login(); } } ]);

./js/services/LoginService.js

 'use strict'; drfmApp.factory('LoginService',function(){ return { login:function(){ console.log("enter function login service"); }, logout:function(){ console.log("enter functuon logout service"); } } });

最后是局部視圖 HTML

 <div class="container-fluid"> <div class="row"> <div class="col-md-8"> <header>Wellcome, {{user.username}}</header> <blockquote> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p> <small>Someone famous <cite>Source Title</cite></small> </blockquote> </div> <div class="col-md-4"> <form class="form-horizontal" role="form" name="form" ng-submit="login()" > <div class="form-group"> <label for="username" class="col-sm-2 control-label"> Username </label> <div class="col-sm-10"> <input type="text" name="username" id="username" class="form-control" ng-model="user.username" required /> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label"> Password </label> <div class="col-sm-10"> <input type="password" name="password" id="password" class="form-control" ng-model="user.password" required /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox" /> Remember me </label> </div> </div> </div> <div class="form-actions"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">Login</button> <a href="#/register" class="btn btn-link">Register</a> </div> </div> </form> </div> </div> </div>

但我總是有這個錯誤

類型錯誤：登錄名不是 function

當點擊頁面的“登錄”按鈕時。

Answer 1

在類似數組的依賴注入中， array中的項目被映射到arguments function 的 arguments。

嘗試這個：

drfmControllers.controller('LoginController', ['$scope', 'LoginService',
  function($scope, LoginService) {//can be used as `function(s, l)`
    $scope.login = function() {
      console.log($scope.user.username);
      LoginService.login();
    }
  }
]);

Answer 2

您正在注入 $scope 和 $location，而不是您的登錄服務。 為了使用它，你必須先注入它。

將其更改為：

drfmControllers.controller('LoginController', ['$scope','LoginService', function($scope, LoginService) {
        $scope.login = function () {
          console.log($scope.user.username);
          LoginService.login();
        }
    }
]);