Angular JS使用controllerAs和具有范围或此变量的此语法

Question

我一直遇到一个问题，它导致与控制器作用域变量的定义不一致。

您可能已经知道，使用controllerAs语法时，必须将所有变量与此实例的实例一起附加到控制器函数中 ，如下所示：

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无法从任何服务的成功或错误功能或实际上任何其他功能的更新中进行更新，因为它将它作为新功能的实例而不是控制器的实例。

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

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

干杯!

Answer 1

您有2个选择：

1）使用vm = this方法中，保持连结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() 方法 ，该方法会将调用函数的上下文修改为控制器的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));
  });