Rectangle 27 1

angularjs Should I use `this` or `$scope`?


Note
Rectangle 27 1

angularjs Should I use `this` or `$scope`?


Both work, but if you apply things that are appropriate for the scope to $scope, and if you apply things that are appropriate for the controller to the controller, your code will be easy to maintain. To the people who say "Ugh just use scope forget this Controller as syntax"...It may work the same but I wonder how you'll be able to maintain a huge application without losing track of things.

Note
Rectangle 27 0

angularjs Should I use `this` or `$scope`?


Note
Rectangle 27 0

angularjs Should I use `this` or `$scope`?


$scope adds nothing to the clarity. In fact it can be be very difficult to know what is going on in the view when using $scope and you have nested scopes. The controller as syntax along with using this adds much more clarity. In the view it is nice and clear which controller's scope a method or property originates from.

I think we first need to understand the new "UserCtrl as uCtrl" syntax before we can say which we think is better.

If you are familiar with oop in JS it makes perfect sense. A controller is a class, and angular uses the new operator each time a controller is created. You are welcome to dislike it, but stating there are issues with using 'this' is misleading. It is an acceptable use case for 'this'.

My opinion is that 'this' in javascript has enough issues on it's own, and that adding another meaning / use for it not a good idea.

Re 'UserCtrl as uCtrl', I agree, this needs to be understood. I think it's a bad idea, for most of the same reasons as the arguments made here : groups.google.com/forum/#!topic/angular/84selECbp1I

There is now the 'controller as' syntax, discussed here. I am not a fan, but now that it's a more 'official' AngularJS construct it deserves some attention.

Note
Rectangle 27 0

angularjs Should I use `this` or `$scope`?


$scope.title = 'some title';
$scope.saveData = function() { ... };
var vm = this;

vm.title = 'some title';
vm.saveData = function(){ ... } ;

return vm;

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

$scope is the "classic" technique while "controller as" is much more recent (as of version 1.2.0 officially though it did appear in unstable pre-releases prior to this).

@JohnPapa - Why don't the SideWaffle templates "return vm;" when using Controller As?

@Kevin Controllers effectively act as a Ctor and thus return "this" already.

Both work perfectly well and the only wrong answer is to mix them in the same app without an explicit reason. Frankly, mixing them will work, but it will just add to the confusion. So pick one and roll with it. The most important thing is to be consistent.

I prefer the "controller as" because I like hiding the $scope and exposing the members from the controller to the view via an intermediary object. By setting this.*, I can expose just what I want to expose from the controller to the view. You can do that with $scope too, I just prefer to use standard JavaScript for this. In fact, I code it like this:

Personally I also follow your approach using vm. The only code smell I've picked up is when you need to specifically interact with $scope, e.g. subscribing or broadcasting events, accessing form validation variables inside your controller etc. This leads to a somewhat mixed environment where you still need to inject $scope even though you use the controller as feature.

Right. $scope is still used for in that case, but it is used more as a service. When we inject angular services ($scope, $q, etc) they provide some feature we need. $scope allows us to watch, apply, uses messages as well as data binding. And even when using controller as, $scope is still used, its just abstracted

This feels cleaner to me and makes it easy to see what is being exposed to the view. Notice I name the variable that I return "vm" , which stands for viewmodel. That's just my convention.

Which one? That depends on you. There are many more examples out there of $scope, but "controller as" is picking up steam as well. Is one better than the other? That's debatable. So how do you choose?

With $scope I can do the same things, so I'm not adding or detracting with the technique.

With $scope I do need to inject $scope into the controller. I don't have to do this with controller as, unless I need it for some other reason (like $broadcast or watches, though I try to avoid watches in the controller).

var vm = this; do you need to call it 'vm' in the view, too? 'controller as vm'. Do they have to be the same?

Note
Rectangle 27 0

angularjs Should I use `this` or `$scope`?


Also, it will insure that you always have at least one . in your binding expression which forces you to follow the don't bind to primitives recomendation.

I think Controller As is better as it allows for more easily nesting scopes as described by Todd Motto here:

Plus you can decouple from the scope which is going away in 2.0.

Note
Rectangle 27 0

angularjs Should I use `this` or `$scope`?


Note
Rectangle 27 0

angularjs Should I use `this` or `$scope`?


$scope.title = 'some title';
$scope.saveData = function() { ... };
var vm = this;

vm.title = 'some title';
vm.saveData = function(){ ... } ;

return vm;

$scope is the "classic" technique while "controller as" is much more recent (as of version 1.2.0 officially though it did appear in unstable pre-releases prior to this).

@JohnPapa - Why don't the SideWaffle templates "return vm;" when using Controller As?

@Kevin Controllers effectively act as a Ctor and thus return "this" already.

Both work perfectly well and the only wrong answer is to mix them in the same app without an explicit reason. Frankly, mixing them will work, but it will just add to the confusion. So pick one and roll with it. The most important thing is to be consistent.

I prefer the "controller as" because I like hiding the $scope and exposing the members from the controller to the view via an intermediary object. By setting this.*, I can expose just what I want to expose from the controller to the view. You can do that with $scope too, I just prefer to use standard JavaScript for this. In fact, I code it like this:

Personally I also follow your approach using vm. The only code smell I've picked up is when you need to specifically interact with $scope, e.g. subscribing or broadcasting events, accessing form validation variables inside your controller etc. This leads to a somewhat mixed environment where you still need to inject $scope even though you use the controller as feature.

Right. $scope is still used for in that case, but it is used more as a service. When we inject angular services ($scope, $q, etc) they provide some feature we need. $scope allows us to watch, apply, uses messages as well as data binding. And even when using controller as, $scope is still used, its just abstracted

This feels cleaner to me and makes it easy to see what is being exposed to the view. Notice I name the variable that I return "vm" , which stands for viewmodel. That's just my convention.

Which one? That depends on you. There are many more examples out there of $scope, but "controller as" is picking up steam as well. Is one better than the other? That's debatable. So how do you choose?

With $scope I can do the same things, so I'm not adding or detracting with the technique.

With $scope I do need to inject $scope into the controller. I don't have to do this with controller as, unless I need it for some other reason (like $broadcast or watches, though I try to avoid watches in the controller).

var vm = this; do you need to call it 'vm' in the view, too? 'controller as vm'. Do they have to be the same?

Note
Rectangle 27 0

angularjs Should I use `this` or `$scope`?


$scope adds nothing to the clarity. In fact it can be be very difficult to know what is going on in the view when using $scope and you have nested scopes. The controller as syntax along with using this adds much more clarity. In the view it is nice and clear which controller's scope a method or property originates from.

I think we first need to understand the new "UserCtrl as uCtrl" syntax before we can say which we think is better.

If you are familiar with oop in JS it makes perfect sense. A controller is a class, and angular uses the new operator each time a controller is created. You are welcome to dislike it, but stating there are issues with using 'this' is misleading. It is an acceptable use case for 'this'.

My opinion is that 'this' in javascript has enough issues on it's own, and that adding another meaning / use for it not a good idea.

Re 'UserCtrl as uCtrl', I agree, this needs to be understood. I think it's a bad idea, for most of the same reasons as the arguments made here : groups.google.com/forum/#!topic/angular/84selECbp1I

There is now the 'controller as' syntax, discussed here. I am not a fan, but now that it's a more 'official' AngularJS construct it deserves some attention.

Note
Rectangle 27 0

angularjs Should I use `this` or `$scope`?


The Angular documentation explicitly tells you that using this is recommended. That, in addition to the fact that $scope is being removed is enough reason for me to never use $scope.

Note