Why doesn't AngularJS controller scope work like regular javascript scope?

Question

run();
function run() {};

In angular though it seems I have to predefine all the functions on a scope before I can run them:

app.controller('MainCtrl', function($scope) {
  $scope.fxn = function() {
    $scope.status = 'working';
  };
  $scope.fxn();
});

Because this throws the error TypeError: Object #<Object> has no method 'fxn':

app.controller('MainCtrl', function($scope) {
  $scope.fxn();
  $scope.fxn = function() {
    $scope.status = 'working';
  };
});

Am I missing something? Is angular enforcing a best-practice?

It has nothing to do with Angular. Just javascript. You are trying to call a object method before you define it. Of course it will fail. Object methods don't hoist. — dfsq
– dfsq, Commented Feb 10, 2014 at 18:54

dave · Accepted Answer · 2014-02-10 18:58:04Z

4

$scope is an object in angular.

In vanilla js, you cannot do:

var x = {};
x.alert("hi");
x.alert = function(msg) { alert(msg); }

When you do

run();
function run() {};

You have function hoisting going on, which is where all function definitions get "hoisted" to the top, so it works as if you had

function run() {};
run();

If you had done, on the other hand:

run(); //TypeError: undefined is not a function
otherrun(); //ReferenceError: otherrun is not defined
var run = function() {}

The difference, is again hoisting, this time it is variable hoisting. That code is the equivalent of:

var run;
run(); //TypeError: undefined is not a function
otherrun(); //ReferenceError: otherrun is not defined
run = function() {}

Where the declaration (but not assignment) of a variable is hoisted to the top.

It's all pretty confusing at first, but if you google javascript hoisting and read a few articles, you should get a good feel for how it works.

answered Feb 10, 2014 at 18:58

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

km6zla Over a year ago

Thanks @dave, I am aware of hoisting but not of the nuances you showed. I assumed that function run(){} was the same as var run = function(){} and that declaring a global function was the same as assigning it to the window which is done implicitly.

Claudiu · Accepted Answer · 2014-02-10 18:56:13Z

1

The distinction is between function statements and function expressions. Function statements act as if they are lifted to the top of the current scope. Function expressions aren't. So

run();
function run() {}

is equivalent to

function run() {};
run();

However,

run();
var run = function () {};

is not equivalent to

var run = function () {};
run();

Rather, it's equivalent to

var run;
run();
run = function () {};

which will fail to run.

answered Feb 10, 2014 at 18:56

Claudiu

231k174 gold badges507 silver badges701 bronze badges

Collectives™ on Stack Overflow

Why doesn't AngularJS controller scope work like regular javascript scope?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related