如何在ES6样式的角度控制器中访问范围变量？

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?

Answer 1

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

1. controllerAs in router or directive:

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

2. 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>

Answer 2

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