Question

我在我的新Angular项目中切换到使用ES6（Babel）。 ES6类不能有变量。我如何设置我的$ scope变量??

说我有一个简单的控制器：

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

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


    } // constructor

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


} 


export default MainController;

我的html看起来像（在构建期间自动注入控制器，比如说）：

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

选项＃1和选项＃2似乎都不起作用。我得到一个空白的标题。这么简单的事情......我做错了什么？

Answer 1

为控制器的属性赋值时，必须使用控制器的controllerAs语法。

controllerAs：

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

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

获取HTML中的属性：

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

如果您想使用$scope，请正常注入，不要使用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

让我们回答上面的答案，对于您拥有的ES6控制器类，您可以创建可以通过绑定更改值的函数。

示例：

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

然后你只需在click事件上调用whatIsTheName（），这是从你的所有代码中删除$ scope的好方法，如果你仍然处于角度1，它也会使你转换为Angular 2更好。

干杯

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

2 个答案: