Angular - When to use $scope versus not

Question

When do we use $scope, versus not use it? It seems I can get away without it, at least as far as the controller definition is concerned (See following examples).

Am I correct in this? Can you please provide an example where this/self would not work, and we are forced to use $scope?

// Method 1: Not using $scope
function LoginController() {
    var self = this;
    this.username = "";
    this.password = "";

    this.login = function() {
        if( (self.username === 'admin') && (self.password === 'admin') ) {
            // Do something
        }
    }
}

// Method 2: Using $scope
function LoginController($scope) {
    $scope.username = "";
    $scope.password = "";

    $scope.login = function() {
        if( ($scope.username === 'admin') && ($scope.password === 'admin') ) {
            // Do something
        }
    }
}

The first approach can be used with `controllerAs` syntax, that has some advantages. — raina77ow, Sep 25 '15 at 12:44
possible duplicate of http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers — Jahongir Rahmonov, Sep 25 '15 at 12:49
There are some other angular functions built into `$scope` like `$scope.$watch`. — ryanyuyu, Sep 25 '15 at 12:50

David L · Accepted Answer · 2015-09-25T13:16:10.947

The current Angular 2.0 migration path describes a world without $scope in the near future and highly recommends that you follow the Angular style guide, which in turn recommends using controllerAs syntax wherever possible, in order to prepare for potential migration and to adhere to best practice.

That said, there are currently a few instances where you have to use $scope.

$scope.$on
$scope.$broadcast
$scope.$emit
$scope.$watch
$scope.$apply

None of these special cases apply for your example, so you should be using controllerAs instead of $scope, I.E:

ng-controller="MyController as MyCtrl"

If you must access $scope in order to use one of the methods above, you can inject it into your controller while still using controllerAs syntax:

function LoginController($scope) {
    var self = this;
    self.username = "";
    self.password = "";

    self.login = function() {
        if( (self.username === 'admin') && (self.password === 'admin') ) {
            // Do something
        }
    }

    $scope.$on('event', function () {});
}

score 2 · Answer 2 · answered Sep 25 '15 at 12:51

2

Method #1 is widely considered best practice. I try to avoid direct references to $scope whenever possible.

$scope is not in Angular 2.0. By avoiding references to it your eventual migration should go easier.

John Papa's style guide is a great reference for best practices: https://github.com/johnpapa/angular-styleguide

answered Sep 25 '15 at 12:51

Mike Feltman

5,160
1
17
38

Thanks. So if $scope isn't in Agular 2.0, how will $on/$emit/$broadcast, etc. work? Is there an alternative? – Ricky Sep 25 '15 at 13:10
I have really only read on 2.0 and although I'm trying to keep an eye on making my migration easier, I'm using what works in 1.x now. The general recommendation I've seen is to try to avoid $emit and use $broadcast instead. – Mike Feltman Sep 25 '15 at 13:20

score 0 · Answer 3 · answered Sep 25 '15 at 13:17

Possibly in the case of $emit and $broadcast we may always need $scope.

But Method 1 is very useful complex parent and child implementation to avoid confusion, yes, hacks are there to prefix the names by parent and child, but still very useful in parent and child/s implementation.

Angular - When to use $scope versus not

3 Answers3