function not working in angularjs

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, Oct 07 '17 at 07: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, Oct 07 '17 at 07:22
everything is working fine... only $scope.showStudents() is not working after inserting the record. — SRP, Oct 07 '17 at 07:26

Maxim Shoustin · Answer 1 · 2017-10-07T07:43:37.007

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. — SRP, Oct 07 '17 at 07:45

Santosh Shinde · Accepted Answer · 2017-10-07T07:37:37.777

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 https://stackoverflow.com/questions/29467339/how-to-call-a-function-from-another-controller-in-angularjs — Niladri, Oct 07 '17 at 07:28

function not working in angularjs

2 Answers2