angularjs calling a function from inside a controller

Question

pokeApp.controller('mycontroller', function($scope, $routeParams){


   // part 1: // why would this not work
   $scope.myFunc();     

   $scope.myFunc = function(){
       console.log("Hi !");
   }

   // part 2: // why would this not work

  this.helloWorld();
  this.helloWorld = function(){
       console.log("Hello World");
  }
}

Hi My question is why would these 2 things not work; i mean either are either in the controller or in the scope. I know i can call a function simply defined 'function helloWorld(){...}'

thanks !

score 1 · Accepted Answer · answered Dec 22 '14 at 03:11

1

You're calling the function before it has been defined. Change your code to:

   $scope.myFunc = function(){
       console.log("Hi !");
   }
   $scope.myFunc();

answered Dec 22 '14 at 03:11

Charlie

10,000
9
49
89

1

This has nothing to do with angular, it's about JavaScript. JS is an interpreted language which means the program will walk through the code line by line, compiling and executing the program as it goes. $scope.myFunc will not exist until the program has hit a line where it has been set - it doesn't look ahead. – Charlie Dec 22 '14 at 03:21

score 1 · Answer 2 · edited May 23 '17 at 12:05

You expected function hoisting to happen:

    myFunct(); 

    function myFunct() {
        alert('hey');
    }

this would work.

But this wouldn't:

myFunct(); 

var myFunct = function() {
    alert('hey');
}

The similar case is going on with the controller scope property, which behaves exactly as a regular variable in this case, means no hoisting happens.

You'll find some great explanations about hoising here: var functionName = function() {} vs function functionName() {}.

So, to make everything in your original code work using the hoisting feature, it should look like this:

pokeApp.controller('mycontroller', function($scope, $routeParams){


   // part 1:
   myFunc();     

   function myFunc(){
       console.log("Hi !");
   }

   // part 2:

  helloWorld();
  function helloWorld(){
       console.log("Hello World");
  }
}

Or, a little hacky way to maintain scopes:

pokeApp.controller('mycontroller', function($scope, $routeParams){


   // part 1:
   $scope.myFunc = myFunc; // this is the key, assigns a hoisted function value
                           // to the $scope object property which is then ready
   $scope.myFunc();     

   function myFunc(){
       console.log("Hi !");
   }

   // part 2:
  this.helloWorld = helloWorld;
  this.helloWorld();
  function helloWorld(){
       console.log("Hello World");
  }
}

Here's a snippet showing that in action:

    var myObj = {};
    myObj.f = myFunct;
    myObj.f(); 

    function myFunct() {
        alert('yay, it still works!');
    }

score 0 · Answer 3 · answered Dec 22 '14 at 03:48

You can use hoisting to do this:

app.controller('MainCtrl', function($scope) {

  $scope.myFunc = myFunc;
  $scope.myFunc();

  function myFunc(){
    console.log("Hi !");
  }

});

plunk

Heare is good article about it - http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

P.S. Actually I can't see any reasons to do so in real practice...

angularjs calling a function from inside a controller

3 Answers3