Naresh k
Naresh k

Reputation: 121

Call function into another function with in the same Controller Angular Js

I am new to using angularjs and i have declared a two functions in controller, and now i want to use one function into another function how can i do that means if i say function name into another function it says Undefined.

here is the code:

'use strict';
angular.module('customer').controller('Controller', ['$scope', '$state', 'Sservice',
  function($scope, $state, Sservice) {

    var that = this;

    (function getDetails() {
        //IMPLEMENTATION
    }());

    this.function2 = function function2 (id){
        //implementation
      getDetails(); // says undefined
    };
  }
]);

Upvotes: 9

Views: 92840

Answers (8)

mohit sharma
mohit sharma

Reputation: 259

.controller('SampleController',function($scope){
$scope.funcA = function(){
   $scope.funcB();//scope level function
   funcC(); //non scope level function``
}
$scope.funcB = function(){
}
var funcC = function(){
}
});

Upvotes: 2

Jayesh Neema
Jayesh Neema

Reputation: 9

Work fine for me:

{
    // define angular module/app

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

    // create angular controller and pass in $scope and $http
    function formController($scope, $http) {

        $scope.sitelist = function(){
            $http.get("http://mars.ourgoogle.in/clients/techinfini/customcms/index.php/Ajax/sitelist").then(function(items){    
            console.log(items.data);
            $scope.list = items.data;       
        }); 
    }

    // process the form
    $scope.processForm = function() {
        $http({
            method  : 'POST',
            url     : 'http://mars.ourgoogle.in/clients/techinfini/customcms/index.php/Ajax/angulartest',
            data    : $.param($scope.formData),  // pass in data as strings
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
        }).success(function(data) {
                $scope.sitelist();
           }
        }
    }
}

Upvotes: 0

Kerisnarendra
Kerisnarendra

Reputation: 913

My these options below could help

'use strict';
angular.module('customer').controller('Controller', ['$scope', '$state', 'Sservice',
  function($scope, $state, Sservice) {

    function getDetails() {
        //IMPLEMENTATION
    };

    function function2 (id){
        //implementation
      getDetails(); // says undefined
    };
  }
]);


or 

'use strict';
angular.module('customer').controller('Controller', ['$scope', '$state', 'Sservice',
  function($scope, $state, Sservice) {

    $scope.getDetails = function() {
        //IMPLEMENTATION
    };

    $scope.function2 = function(id){
        //implementation
      $scope.getDetails(); // says undefined
    };
  }
]);

Upvotes: 0

Mohmad Iqbal Lone
Mohmad Iqbal Lone

Reputation: 459

Worked best for me

var app = angular.module('MyApp', []);
app.controller('MyCtrl',['$scope',function($scope)
 {
$scope.functionA=function(){
alert("Inside functionA")
$scope.functionB(); 	
}; 								 
$scope.functionB=function(){ 	 									
alert("Inside functionB");	 
}
}]);
<!DOCTYPE html>
<html ng-app="MyApp" ng-controller="MyCtrl">
  
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>


<input type="button" value="Click to call functionA" ng-click="functionA()">


</body>
</html>

Upvotes: 3

seanhodges
seanhodges

Reputation: 17524

Several areas of code are confused in your example above. For a start, function2 is not declared properly.

You've wrapped your getDetails function into what is known as a self-executing anonymous function. This means it is not visible to code outside the SEAF wrapper, including function2. Omit the SEAF wrapper so getDetails is defined when function2 wants to use it.

Finally, you are using Angular but assigning function2 to this on the controller. This is probably not what you wanted to do; functions that you want to expose to the HTML should be attached to $scope, not this.

'use strict';
angular.module('customer').controller('Controller', ['$scope', '$state', 'Sservice',
  function($scope, $state, Sservice) {

    function getDetails() {
        //IMPLEMENTATION
    }

    $scope.function2 = function(id) {
        //implementation
        getDetails();
    };
  }
]);

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

You are making things complex. Simply, do like this

'use strict';
angular.module('customer').controller('Controller', ['$scope', '$state', 'Sservice',
      function($scope, $state, Sservice) {

        function getDetails() {
            //IMPLEMENTATION
        };

        function function2 (id){
            //implementation
          getDetails(); // says undefined
        };
      }
]);

Upvotes: 0

JB Nizet
JB Nizet

Reputation: 692181

I don't know what you're trying to achieve exactly, but you can simply declare your two functions as

function getDetails() {
    //IMPLEMENTATION
}

this.function2 = function(id) {
    getDetails(); 
};

Upvotes: 0

Rajkumar Rathi
Rajkumar Rathi

Reputation: 309

.controller('SampleController',function($scope){
$scope.funcA = function(){
   $scope.funcB();//scope level function
   funcC(); //non scope level function``
}
$scope.funcB = function(){
}
var funcC = function(){
}
});

Upvotes: 13

Related Questions