为什么控制器不能使用ng-src？

Question

我尝试加载通过$ http获得的图像,但它不能与控制器一起使用.但是,它与$ scope的工作正常.我认为两者是相同的,我更喜欢使用控制器,就像我可以使它工作.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所指的范围.

在这种情况下,您this在HTTP调用中使用函数内部,这限制了this该函数的范围.

您必须确保它this指的是控制器的范围.

您可以使用以下内容解决此问题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调用成功时,它将按预期运行,而不是仅在失败时设置图像.