Angular JS 使用 controllerAs 和 this syntax with scope or this variables

Question

我一直运行遇到一个问题，它导致与控制器范围变量的定义不一致。

正如您可能知道的那样，使用 controllerAs 语法，您必须在 [=24= 中使用 this 实例附加所有变量]控制器功能如下图：

angular.module('angularJsInternationalizationApp')
  .controller('MainCtrl', function (SampleService) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    this.translatedFromService = '';
    SampleService.getTranslation().then(function(data){
        this.translatedFromService = data;
    });
  });

现在的问题是this.translatefDromService无法从成功或错误[=31]更新=] 任何服务的功能或事实上任何其他功能，因为它将 this 作为新功能的实例而不是控制器。

在这种情况下可以做什么。

我使用了一种解决方案，您将其标记为 vm。 var vm = this 在控制器的开头但除此之外还有什么解决方案吗？

干杯！

Answer 1

您有 2 个选择：

1) 使用 vm = this 方法，保持控制器的 link 到 this 上下文：

angular.module('angularJsInternationalizationApp')
  .controller('MainCtrl', function (SampleService) {
    var vm = this;
    vm.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    vm.translatedFromService = '';
    SampleService.getTranslation().then(function(data){
        vm.translatedFromService = data;
    });
  });

2) 在处理程序上使用 bind() method，这会将调用函数的上下文修改为控制器的 this:

angular.module('angularJsInternationalizationApp')
  .controller('MainCtrl', function (SampleService) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    this.translatedFromService = '';
    SampleService.getTranslation().then(function(data){
        this.translatedFromService = data;
    }.bind(this));
  });

Angular JS 使用 controllerAs 和 this syntax with scope or this variables

Angular JS using controllerAs and this syntax with scope or this variables

javascript

this

angularjs

angularjs-controlleras