Call a function from function inside the same controller

18,923

Solution 1

You need to call this.getSomething1() but there's a catch.

The problem here is that this inside the function is not always the same as this outside it. So to be safe, save the controller this in a variable and use that to call the function:

angular.module('App')

.controller('Controller', ['$http', '$scope', function ($http, $scope) {
    var vm = this;
    vm.getSomething1 = function () {
    };

    vm.getSomething2 = function ()  {
        if(1 == 1){
            vm.getSomething1();
        }
    };
}
]);

Another option that can make for much cleaner code is to always use named functions. You can still expose whichever of them need to be exposed on the controller but you can also call them directly.

angular.module('App')

.controller('Controller', ['$http', '$scope', function ($http, $scope) {
    angular.extend(this, { getSomething1: getSomething1, getSomething2: getSomething2 });
    return;

    function getSomething1() {
    };

    function getSomething2()  {
        if(1 == 1){
            getSomething1();
        }
    };
}
]);

This also has the benefit of separating the initialisation code at the top of the controller instead of scattering it through the function declarations.

The extend call looks even cleaner if you can use ES2016 syntax:

angular.extend(this, { getSomething1, getSomething2 });

Solution 2

Try using the scope variable instead of this in the controllers,

angular.module('App')

.controller('Controller', ['$http', '$scope', function ($http, $scope) {
    var scope = $scope
    scope.getSomething1 = function () {
    };

    scope.getSomething2 = function ()  {
        if(1 == 1){
            scope.getSomething1();
        }
    };
}
]);

You can also declare a controller using a functional syntax as,

(function() {
  'use strict';

  angular
    .module('App')
    .controller('Controller', Controller);

  /** @ngInject */
    function Controller($http, $scope) {

        var scope = $scope
        scope.getSomething1 = function () {
        };

        scope.getSomething2 = function ()  {
            if(1 == 1){
                scope.getSomething1();
            }
        };
    }


})();    
Share:
18,923
ottercoder
Author by

ottercoder

Java Developer & Scrum Master

Updated on June 28, 2022

Comments

  • ottercoder
    ottercoder over 1 year

    So I'm trying to call a function from another function. And both of them defined inside the same Controller. But with everything I've tried so far it's "funtion is not defined" at the best. How to do this thing properly?

    angular.module('App')
    
    .controller('Controller', ['$http', '$scope', function($http, $scope) {
    
        this.getSomething1 = function() {};
    
        this.getSomething2 = function() {
            if (1 == 1) {
                getSomething1();
            }
        };
    }]);
    

    ReferenceError: getSomething1 is not defined

  • Duncan
    Duncan over 7 years
    Much better though to use this and the "controller as" form of the syntax.
  • Rohit416
    Rohit416 over 7 years
    This would work but the named function approach sounds much better not only because it just works, it is cleaner as well. Adding the methods on scope will expose them to views (at least for the private one's).