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

时间:2015-10-25 11:42:03

标签: javascript angularjs ng-submit ng-controller

我创建了一个角度承诺,它调用一个http方法(对应一个休息服务),该方法应该在提交表单时使用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>

有什么想法吗?提前谢谢你。

2 个答案:

答案 0 :(得分:1)

如果你没有看到&#34;德鲁伊&#34;在应用程序上,您很可能还没有在应用程序中包含angular.js和app.js。

如果你这样做,它可能正常工作,而且你还没有正确定义UrlServices,也无法找到它。您可以查看浏览器控制台以获取更多详细信息。

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

在控制台中我看到:

 Error: Can't find variable: UrlServices

cardService @ http://fiddle.jshell.net/j8o0ag4t/show/:50:29 cardService @ http://fiddle.jshell.net/j8o0ag4t/show/:62:28 http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:160:97 http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:177:84 $ EVAL @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:100:328 $适用@ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:101:110 http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:177:71 http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:27:19 forEach @ [本机代码] 2P @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:7:262 Ç@ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:26:493

答案 1 :(得分:1)

您必须为表单提供name属性,并且其后续表单元素本身也应该有name

此外,您不能ng-model标记p。使用输入类型文本,如下所示:

HTML:

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