function not working in angularjs [duplicate]

Question

.controller("selectStudentController",function($scope,$http){
    $scope.showStudents = function(){
        $http.post("selectStudent.php").then(function(response){
            $scope.studentData = response.data;
        })
    }
})
.controller("saveStudentController",function($scope,$http){
    $scope.saveIt = function(){
        $http.post("saveNewStudent.php", {"sName" : $scope.sName,
                                          "gender" : $scope.gender,
                                          "salary" : $scope.salary,
                                          "dob" : $scope.dob}
        ).then(function(response){                            
            alert("Record Saved Successfully...");  
            $scope.showStudents();                            
        })                        
    }                   
})

Hi, this is my code. Here, when i call $scope.showStudents(); is not working after Record Saved Successfully... message. Can anybody tell me what is the mistake in it. My record saved and select fine but i unable to call this function.

you are doing wrong / your mistakes are: using $scope, putting obsolete quotes around object property names, using alert for debugging and having all controllers chained in one file. But the biggest mistake is asking question on stackoverflow before you understand your own code and calling it function not working which is describing 99% of programming problems — smnbbrv
– smnbbrv, Commented Oct 7, 2017 at 7:17
why are you chaining the controllers? can you create a separate controller with different variables? like var app = angular.module([]); then app.controller("selectStudentController") and app.controller("saveStudentController") — Niladri
– Niladri, Commented Oct 7, 2017 at 7:22
everything is working fine... only $scope.showStudents() is not working after inserting the record. — SRP
– SRP, Commented Oct 7, 2017 at 7:26

Maxim Shoustin · Accepted Answer · 2017-10-07 07:43:37Z

You have 2 controllers selectStudentController and saveStudentController

Suppose selectStudentController is not a parent scope of saveStudentController (otherwise your code should work)

You cannot call directly method of other controller from local one.

The best practice is to use service. Put method showStudents logic into service that will be available from both controllers.

app.service('YourService', ['$http', function ($http) {

    var self = this;

    self.showStudents = function(){
        return $http.post(
             "selectStudent.php"
          ).then(function(response){
               return response.data;
          })
       }    
  }]);

And now saveStudentController will look like:

.controller("saveStudentController",function($rootScope, $scope,$http,YourService){
                   $scope.saveIt = function(){
                        $http.post("saveNewStudent.php",
                        {"sName":$scope.sName,
                        "gender" : $scope.gender,
                        "salary" : $scope.salary,
                        "dob" : $scope.dob
                        }                                                                
                    ).then(function(response){                            
                        alert("Record Saved Successfully...");  
                        $rootScope.$broadcast('showStudents', {});
                    })                        
                }                   
            })

selectStudentController controller:

 .controller("selectStudentController",function($scope,YourService){

    $scope.$on("showStudents", function (event, data) {                    
      YourService.showStudents().then(function(response){
           $scope.studentData = response.data;
       })      
    });
  })

saveIt method you can also put into Service

thanks it is working fine. I don't know this. Recently i started to work on angularjs. but thanks once again i got new idea to create and call service.

Santosh Shinde · Accepted Answer · 2017-10-07 07:37:37Z

You can not called directly local scope method in different controller

You have following way to access the methods in controller,

Create same method in same controller
Use services and inject in controller
Use $rootScope(But not good idea)
Use $broadcast and $emit

Sample code for you,

 .controller("saveStudentController",function($scope,$http){
                          //here declare your method
                          $scope.showStudents = function(){
                              $http.post(
                                  "selectStudent.php"
                                  ).then(function(response){
                                      $scope.studentData = response.data;
                                  })
                             }
                             $scope.saveIt = function(){
                                  $http.post("saveNewStudent.php",
                                  {"sName":$scope.sName,
                                  "gender" : $scope.gender,
                                  "salary" : $scope.salary,
                                  "dob" : $scope.dob
                                  }                                                                
                              ).then(function(response){                            
                                  alert("Record Saved Successfully...");  
                                  $scope.showStudents();                            
                              })                        
                          }                   
                      })

Please check same question to here.

Hope this will help you.

This question already has an answer here stackoverflow.com/questions/29467339/…

Collectives™ on Stack Overflow

function not working in angularjs [duplicate]

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related