angularjs - 为什么 Controller 不能与 ng-src 一起使用？

Question

我尝试加载通过 $http 获取的图像，但它无法与 Controller 一起使用。然而，它与 $scope 一起工作得很好。我认为两者是相同的，我更喜欢使用 Controller ，因为我可以让它工作。 http://plnkr.co/edit/9KvvyKQggKTthLDFOAab?p=preview 处的示例将显示该问题。 $scope 版本一旦设置就会更新图像，但另一个永远不会更新。

angular.module('controllerAsExample', [])

.controller('SettingsController1', function($http) {
  $http.get(imgFeedUrl)
    .success(function(data) {

    }).error(function(){
       this.myImg = validImg;
    });
    this.noImg = invalidImg;
})


.controller('SettingsController2', function($http, $scope) {
  $http.get(imgFeedUrl)
    .success(function(data) {

    }).error(function(){
       $scope.myImg = validImg;
    });
    $scope.noImg = invalidImg;
})

Answer 1

为了使用controllerAs，您必须了解this所指的范围。

在本例中，您在 HTTP 调用中的函数内部使用 this，这将 this 的范围限制为该函数。

您必须确保 this 引用的是 Controller 的范围。

您可以使用诸如 var _this = this; 之类的方法来解决此问题:

.controller('SettingsController1', function($http) {

  var _this = this;  

  $http.get(imgFeedUrl)
    .success(function(data) {
        _this.myImg = validImg;
    }).error(function(){
       _this.noImg = invalidImg;
    });
})

这是更正的错误... http://plnkr.co/edit/i9ZEMtVyT8XrYpxeLHBc?p=preview

但是，这个 plunk 起作用的唯一原因是您的 HTTP 调用失败...您使用的是错误回调而不是成功回调

因此，对于真正的代码，您需要像上面的代码片段一样进行操作，当 HTTP 调用成功时，它将按预期运行，而不是仅在失败时设置图像。