AngularJS-从未使用ng-submit调用的函数

Question

我创建了一个有角度的承诺，该承诺会调用http方法（对应于rest服务），该方法应该在使用ng-submit提交表单时被调用。 它永远不会发生，并且没有错误，似乎从未调用过该函数。 因此，这是JavaScript代码：

myapp.factory('CardFactory', ['$http', function($http){
return{
    cardService: function(hclass) {
        return $http({
            method: 'get',
            url: UrlServices.baseUrl + 'http://localhost:8080//HSRestServices/hsrest/decks/getCards/' + hclass,
        })
    }
    }
  }])
myapp.controller('CardCtrl', ['$scope',  'CardFactory', function($scope, CardFactory ){

$scope.card = "Druid";

$scope.cardService = function() {


    CardFactory.cardService($scope.card)
        .then(function (response) {

            $scope.status = response.status;
            $scope.card = response.data;

            console.log("Response: " + JSON.stringify({data: response.data}));

            if (response.status == 200){
                $scope.card = response.data;
            } else {
                console.log("Response: Something went wrong.");
            }
        }, function (response) {
            console.log("Response: Something went wrong.");
        })
};
 }]);

和html代码：

<body ng-app="mainApp">
<div ng-controller="CardCtrl">
<form ng-submit="cardService()">
    <input type="submit" value="Submit">
</form>
<p ng-model="card">{{card}}</p>

  </div>

 </body>

有什么想法吗？谢谢。

Answer 1

如果您在应用程序中没有看到“ Druid”一词，则很可能您的应用程序中没有包含angular.js和app.js。

如果这样做，它可能正在工作，并且您没有正确定义UrlServices，并且找不到它。 您可以检查浏览器控制台以了解更多详细信息。

否则对我有用。 看看这个jsfiddle： https ://jsfiddle.net/j8o0ag4t/

在控制台中，我看到：

 Error: Can't find variable: UrlServices

Answer 2

您必须为表单赋予name属性，其所有后续表单元素本身也应具有name 。

另外，您不能在p标签上使用ng-model 。 使用输入类型的文本，如下所示：

HTML：

<form name="cardForm" ng-submit="cardService()" novalidate>
    <input type="text" name="card" />
    <input ng-model="card" type="submit" value="Submit">
</form>

AngularJS-从未使用ng-submit调用的函数

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-10-25 11:53:10

解决方案2
1 2015-10-25 11:54:07

AngularJS-从未使用ng-submit调用的函数

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-10-25 11:53:10

解决方案2 1 2015-10-25 11:54:07

解决方案1
1 已采纳 2015-10-25 11:53:10

解决方案2
1 2015-10-25 11:54:07