Using Multiple Functions in AngularJs

Question

I'm new to angular and using a function to load data using $http, that worked for me. After that I decided to do some form validation to see it's behaviour. I can do it individually but a bit confused on how can I merge my code with the above so that both of my functions work well. The code is as:

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

App.controller('DataCtrl', function($scope, $http) {
  $http.get('any url or file')
    .then(function(result) {

      $scope.data = result.data;


    });
});

The controller is defined in the body attribute like this:

<body ng-controller="DataCtrl">

Now when I put the other function in the same app.js file, it doesn't work, can anybody help me out on this, the validation code is something like this:

    App.controller('DataCtrl', function($scope) {
      $scope.submitForm = function(isValid) {

    if (isValid) {
      alert('submitting data');
    }
  };

});

The only thing I need to do this is to make them work like this: 1. Load data (working) 2. Implement validation with the help of second code block.

what do you mean by its not working? Is the function not getting invoked? — CuriousMind
– CuriousMind, Commented Jun 20, 2015 at 5:01

squiroid · Accepted Answer · 2015-06-20 05:05:39Z

3

Just try to explain how the thing is working :)

When browser encounter this line <body ng-controller="DataCtrl"> it will look for the defination of controller that is registered with the angular js. But in your case I guess you are registed controller two times like

FIRST

App.controller('DataCtrl', function($scope, $http) {
  $http.get('any url or file')
    .then(function(result) {

      $scope.data = result.data;


    });
});

SECOND

 App.controller('DataCtrl', function($scope) {
      $scope.submitForm = function(isValid) {

    if (isValid) {
      alert('submitting data');
    }
  };

});

So one of the definition overwrites the other depending on the order of the registered method present in your script file.

So to overcome this you need to use only one registered controller:-

 App.controller('DataCtrl', function($scope, $http) {
     $http.get('any url or file').then(function(result) {

         $scope.data = result.data;


     });

      $scope.submitForm = function(isValid) {

          if (isValid) {
              alert('submitting data');
           }
      };
 });

Code credit :- S Vinesh

answered Jun 20, 2015 at 5:05

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

S Vinesh Over a year ago

Actually you only have to use the third block. The first and second block are unnecessary. So you just have one controller. Hope you understand!. Am I answering properly? Is this what u ask?

squiroid Over a year ago

Hey @S Vinesh that's what I said to the OP he/she must have to use only one definition of controller instead of two.

S Vinesh · Accepted Answer · 2015-06-20 04:56:24Z

2

Just use it like below

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

 App.controller('DataCtrl', function($scope, $http) {
     $http.get('any url or file').then(function(result) {

         $scope.data = result.data;


     });

      $scope.submitForm = function(isValid) {

          if (isValid) {
              alert('submitting data');
           }
      };
 });

answered Jun 20, 2015 at 4:56

S Vinesh

5391 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Using Multiple Functions in AngularJs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related