AngularJS 控制器中的函数未被调用

Question

我正在尝试使用以下代码从我的 AngularJS 控制器调用函数：

控制器代码

(function () {

    var hello = angular.module("helloApp", []);

    hello.controller("HelloCtrl", ["$http", "$scope", function($scope, $http) {
        console.log("in controller");
        $scope.test = function() {
            console.log("in test function");
            $http.get("/test").success(function(data) {
                console.log("success");
            })
            .error(function(data) {
                console.log("error");
            });
        };
    } ]);

})();

HTML

<!DOCTYPE html>
<html ng-app="helloApp">
  <head>
    ...
  </head>
  <body ng-controller="HelloCtrl">
  <div class="container">
    <form class="form-horizontal">
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default" ng-click="test()">Search</button>
        </div>
      </div>
    </form>
  </div>
  ...
</body>

当我启动应用程序时，我看到消息 "in controller"，如我所料。但是，如果我单击提交按钮，则我看不到任何其他三个控制台消息。

我错过了什么？

Answer 1

你的依赖注入顺序错误。

hello.controller("HelloCtrl", ["$http", "$scope", function($scope, $http) {

应该是

 hello.controller("HelloCtrl", ["$http", "$scope", function($http, $scope) {

参数的顺序必须与名称数组的顺序相同。

AngularJS 控制器中的函数未被调用

Function in AngularJS controller not being called

angularjs

angularjs-controller

angularjs-ng-click