AngularJS - function never called with ng-submit

Question

I've created an angular-promise which calls a http method (corresponding to a rest service),which is supposed to be called when a form is submitted, using ng-submit. It never happens, and there is no error, it seems like the function is never called. So here is the javascript code:

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

and the html code:

<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>

Any ideas?Thank you in advance.

Did your `$http` call succeed or any response ? Check `Chrome` network tab — Tasnim Reza, Oct 25 '15 at 12:24

ergonaut · Accepted Answer · 2015-10-25T12:03:41.180

If you don't see the word "Druid" on the app, most likely you haven't included angular.js and app.js in your application.

If you do, it's probably working, and you haven't properly defined UrlServices, and it cannot find it. You can check the browser console for more details.

Otherwise it works for me. Check out this jsfiddle: https://jsfiddle.net/j8o0ag4t/

In the console I see:

 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 $apply@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@[native code] p@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:7:262 c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:26:493

I see Druid, so its not the first case,the browser console shows nothing,no error message, or the console logs i created. — , Oct 25 '15 at 11:57

score 1 · Answer 2 · answered Oct 25 '15 at 11:54

You have to give a name attribute to your form and all its subsequent form elements should have a name themselves too.

Also, you cannot have ng-model on a ptag. Use an input type text as follows:

HTML:

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

AngularJS - function never called with ng-submit

2 Answers2