Angular JS使用controllerAs和这个语法与范围或这个变量

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

本文关键字：范围 变量 语法 JS controllerAs Angular 使用      更新时间：2023-09-26

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

您可能知道，使用 controllerAs 语法，您必须在控制器函数中将此实例附加所有变量，如下所示：

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

现在的问题是这个.translatefDromService不能从任何服务的成功或错误函数更新，或者实际上任何其他函数，因为它将其作为新功能的实例而不是控制器。

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

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

干杯！

您有 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));
  });
相关文章：