Angularjs 在使用controllerAs语法时，$http异步调用后不会更新视图

我正在学习angularjs，我正在尝试使用controllerAs语法，因为我来自Java背景，这对我来说更有意义，但我在理解摘要循环时遇到了困难

我正在尝试执行http调用并更新控制器中的变量。当我在控制器中使用$scope时，视图会在收到数据后更新，但当我使用controllerAs语法时，视图不会更新

带有$scope语法的代码笔

我想知道我做错了什么。虽然我可以继续使用$scope格式，但我想知道我是否做错了什么，或者是否应该添加其他语句来监视变量并手动更新值

提前感谢

这在函数内部有不同的含义。将其分配给变量并使用它。尝试：

angular.module("Test", []).controller('testCtrl', ['$http', function($http){
  var vm = this;
  vm.output = "Loading";
  vm.onClick = function(){
    console.log('clicked');
    $http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){ 
      vm.output = "worked!!";
      console.log(vm.output);
    })
  }
}]);

这在函数内部具有不同的含义。将其分配给变量并使用它。尝试：

angular.module("Test", []).controller('testCtrl', ['$http', function($http){
  var vm = this;
  vm.output = "Loading";
  vm.onClick = function(){
    console.log('clicked');
    $http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){ 
      vm.output = "worked!!";
      console.log(vm.output);
    })
  }
}]);

---

这是因为javascripts闭包。定义新函数时，您正在创建一个新范围，因此关键字this对每个新范围都有新的含义

要解决此问题，请在控制器顶部定义控制器范围。使用的常用名称为vm或$ctrl

然后，您的控制器将如下所示：

angular.module("Test", []).controller('testCtrl', ['$http', function( $http){
  var $ctrl = this;
  $ctrl.output = "Loading";
  $ctrl.onClick = function(){
    console.log('clicked');
    $http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){ 
      $ctrl.output = "worked!!";
      //$scope.$apply();
    })
  }
}]);

---

这是因为javascripts闭包。定义新函数时，您正在创建一个新范围，因此关键字this对每个新范围都有新的含义

要解决此问题，请在控制器顶部定义控制器范围。使用的常用名称为vm或$ctrl

然后，您的控制器将如下所示：

angular.module("Test", []).controller('testCtrl', ['$http', function( $http){
  var $ctrl = this;
  $ctrl.output = "Loading";
  $ctrl.onClick = function(){
    console.log('clicked');
    $http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){ 
      $ctrl.output = "worked!!";
      //$scope.$apply();
    })
  }
}]);

angular.module("Test", []).controller('testCtrl', ['$http', function( $http){
  var $ctrl = this;
  $ctrl.output = "Loading";
  $ctrl.onClick = function(){
    console.log('clicked');
    $http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){ 
      $ctrl.output = "worked!!";
      //$scope.$apply();
    })
  }
}]);