Menu
There are two patterns in use for accessing controller functions: this and $scope.
Which should I use and when? I understand this is set to the controller and $scope is an object in the scope chain for views. But with the new "Controller as Var" syntax, you can easily use either. So what I'm asking is what is best and what is the direction for the future?
Example:
Using this
function UserCtrl() {
this.bye = function() { alert('....'); };
}
<body ng-controller='UserCtrl as uCtrl'>
<button ng-click='uCtrl.bye()'>bye</button>
Using $scope
function UserCtrl($scope) {
$scope.bye = function () { alert('....'); };
}
<body ng-controller='UserCtrl'>
<button ng-click='bye()'>bye</button>
I personally find the this.name to be easier on the eye and more natural compared to other Javascript OO patterns.
Advice please?
495
"How does this and $scope work in AngularJS controllers?" When the controller constructor function is called, this is the controller. When a function defined on a $scope object is called, this is the "scope in effect when the function was called". This may (or may not!) be the $scope that the function is defined on.
You can create properties to a $scope object inside a controller function and assign a value or function to it. The $scope is glue between a controller and view (HTML). It transfers data from the controller to view and vice-versa.
As I understand, the main reason to use "controller as vm" syntax is that controllers in angularjs actually serve as models(encapsulate data and provide behaviours), or view models(expose data to html).
The $ in "$scope" indicates that the scope value is being injected into the current context. $scope is a service provided by $scopeProvider . You can inject it into controllers, directives or other services using Angular's built-in dependency injector: module.
Both have their uses. First, some history ...
$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).
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.
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?
Comfort
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:
var vm = this;
vm.title = 'some title';
vm.saveData = function(){ ... } ;
return vm;
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.
With $scope I can do the same things, so I'm not adding or detracting with the technique.
$scope.title = 'some title';
$scope.saveData = function() { ... };
So its up to you there.
Injection
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).
UPDATE I wrote this post about the 2 choices: http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/
230
$scope is being removed in Angular 2.0. Thus, using this would be an approach others want to follow as the date of release of Angular 2.0 comes closer.
68
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
