How to access scope variable in ES6 styled Angular Controller?

Question

I switched to using ES6 (Babel) in my new Angular project. ES6 classes cannot have variables. How do I set my $scope variable now??

Say I have a simple controller:

class MainController {
    constructor ($timeout, events) {
        'ngInject';

            this.textMaker = "Hello!" //Option #1


    } // constructor

    textMaker(){            //Option #2
        return "Hello!";
    }


} 


export default MainController;

My html looks like (controller is aut0matically injected during build, say):

<h1> {{textMaker}}</h1>

Both Option #1 and Option#2 don't seem to work. I get a blank heading. Such a simple thing.. what am i doing wrong?

`this` would only work if you have defined `controllerAs` or `as` for your controller, on the otherhand could you try injecting `$scope` and do something like this `this.$scope.whatever` (I'm not sure about this) — Rahil Wazir, Sep 27 '15 at 13:56
I have defined a `controllerAs` in my ui-router file. what should its value be? And how does it effect this? — Shubham Kanodia, Sep 27 '15 at 13:58
There seems to be a misunderstanding. The fact that you use ES6 doesn't change anything. You use `$scope` the same way as you use it with ES5. ES6 "classes" are just syntactical sugar (yet), not so much a new feature. — a better oliver, Oct 03 '15 at 18:21
No, you can't use $scope in es6, because if u inject and starts using $scope, the gulp will throw error as "Argument clash". This is because of, in ES6, 'this' is acting as $scope, but only when you have alise for controller in routing state definition for that controller. — MechaCode, Apr 23 '17 at 16:15

Ori Drori · Answer 1 · 2016-05-05T21:44:23.417

When you assign a value to a property of the controller, you have to use the controllerAs syntax for the controller.

controllerAs in router or directive:

controllerAs: 'mainCtrl' // in router or in directive, you still need to state the controller property
controllerAs in ngController:

<div ng-controller="MainController as mainCtrl">

Get the property in the HTML:

<h1> {{mainCtrl.textMaker}}</h1>

If you want to use $scope, inject it normally, and don't use controllerAs:

constructor ($scope, $timeout, events) {

    this.$scope = $scope; // assign $scope to a property of the controller, so it will be available in methods

    this.$scope.prop = 'value'; // refer to properties on the scope in the constructor or methods

}

Html:

<h1> {{textMaker}}</h1>

My problem was not stating the controller in template. Thanks. — Burak Tokak, Sep 03 '16 at 19:41

score 0 · Answer 2 · answered Jul 05 '16 at 14:37

Lets ellobrate a little on the answer above, for the ES6 controller class that you have, you can make functions that can change the values with binding.

Example:

class something{
 constructor(){
  this._Name = '';
 }
whatIsTheName(){
 this._Name = 'Unix Rox!'
}
export default something;
}

Then you just simply call whatIsTheName() on a click event, this is a great way to remove the $scope from all your code, it also makes your conversion to Angular 2 better if you are still on angular 1.

Cheers

How to access scope variable in ES6 styled Angular Controller?

2 Answers2