CODEWITHSUNDEEP
javascriptangularjs
Brittany Rutherford
Brittany Rutherford

Reputation: 605

Why is the ng-submit not firing the $scope.submit function?

I have App.js with the following code: 

var app = angular.module('githubApp', []);

and I have githubAppController with the following code: 

app.controller('githubController', function ($scope, $http) {
    $scope.submit = function () {
        var promise = $http.get('https://api.github.com/users/odetocode');
        promise.then(onUserGet);

        var onUserGet = function (response) {
            $scope.user = response.data;
        };
    };
});

in my page.html, I have the following code: 

!DOCTYPE html>
<html >
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/custom.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/App.js"></script>
    <script src="Scripts/githubController.js"></script>
</head>
<body ng-app="githubApp">
    <div ng-controller="githubController">
        <form class="form-horizontal" ng-submit="submit()">
 <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">

                        <input type="submit" id="submit" class="btn btn-primary" value="Submit" />
                        <input type="reset" id="submit" class="btn btn-primary" value="Reset" />
                    </div>
                </div>

        </form>

<div class="col-sm-5">
            <label>{{user.name}}</label>
        </div>
        <div class="col-sm-7">
            <a ng-href="{{user.blog}}">{{user.company}}</a>
        </div>

        <div>
            <img ng-src="{{user.avatar_url}}" />
        </div>
    </div>

Why is the ng-submit not firing the $scope.submit function? Is there something wrong am doing? 

var app = angular.module('githubApp', []);
app.controller('githubController', function($scope, $http) {
  $scope.submit = function() {
    var promise = $http.get('https://api.github.com/users/odetocode');
    promise.then(onUserGet);

    var onUserGet = function(response) {
      $scope.user = response.data;
    };

  };
});
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

<body ng-app="githubApp">
  <div ng-controller="githubController">
    <form class="form-horizontal" ng-submit="submit()">
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">

          <input type="submit" id="submit" class="btn btn-primary" value="Submit" />
          <input type="reset" id="submit" class="btn btn-primary" value="Reset" />
        </div>
      </div>
    </form>
    <div class="col-sm-5">
      <label>{{user.name}}</label>
    </div>
    <div class="col-sm-7">
      <a ng-href="{{user.blog}}">{{user.company}}</a>
    </div>

    <div>
      <img ng-src="{{user.avatar_url}}" />
    </div>
  </div>

Thank you.

Upvotes: 1

Views: 357

Answers (3)

Sergio Tulentsev
Sergio Tulentsev

Reputation: 230521

var promise = $http.get('https://api.github.com/users/odetocode');
promise.then(onUserGet);

var onUserGet = function (response) {
  $scope.user = response.data;
};

onUserGet is not yet defined at this point. You call it before you define it. This can't work.

So, submit is triggered (contrary to what you think). But because it's broken, you don't observe the desired side-effects.

Upvotes: 1

user3587856
user3587856

Reputation: 289

You can use something like this in your controller,

var app = angular.module('githubApp', []);
app.controller('githubController', function ($scope, $http) {
    $scope.submit = function () {
        console.log("In function");
        $http.get('https://api.github.com/users/odetocode').success(function(data){
          $scope.user = data;
        })


    };
});

Upvotes: 0

Anandhan Suruli
Anandhan Suruli

Reputation: 365

use the below code.

$scope.submit = function() {

        var promise = $http.get('https://api.github.com/users/odetocode');
        promise.then(function(response) {
          $scope.user = response.data;
        });

Upvotes: 0

Related Questions