Angular JS 和 Ionic - 从 ng-repeat 动态更改 img src答案

【问题标题】：Angular JS and Ionic - Change img src dynamically from ng-repeatAngular JS 和 Ionic - 从 ng-repeat 动态更改 img src
【发布时间】：2016-01-26 12:10:15
【问题描述】：

我有一个 ng-repeat 指令来显示 6 张图片。我进行 AJAX 调用以将照片从服务器获取到应用程序。所有数据都存储在称为供应商数据的范围变量中。然后，在 HTML 代码中，我执行 ng-repeat 来显示图片。每张照片下方都有一个按钮，可以从图库中获取另一张照片并进行更改。代码如下：

HTML 代码

   <div ng-repeat="photo in vendordata.galerias" class="elemento">
        <div style="z-index: 10;">
          <img class="thumb" ng-src="{{photo.url}}" />
        </div>
        <div class="" style="text-align: center;">
          <button class="" href="#" ng-click="changePic($index)">Change picture</button>
        </div>
      </div>
    </div>

控制器代码：

$scope.changePic = function(identifier){
    $scope.elementSek = identifier;
    $scope.getPhoto(pictureSource.PHOTOLIBRARY);
};
$scope.getPhoto = function (source) {
  // Retrieve image file location from specified source
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
    destinationType: destinationType.FILE_URI,
    sourceType: source });
};
function onPhotoURISuccess(imageURI) {
  // Get image handle
  $scope.vendordata.galerias[$scope.elementoSek].url = imageURI;
}
// Called if something bad happens.
//
function onFail(message) {
  console.log('Failed because: ' + message);
}

在更改前后，var 具有正确的值。但 img 不会更新所选图片。如何更新？

【问题讨论】：

哪个路径返回photo.url？
你试过将$scope.vendordata.galerias[$scope.elementoSek].url = imageURI; 包装成$scope.$apply 吗？
选择新图片前返回http://domain.com/galleries/picture.jpg，修改后返回file://path_to_new_file.jpg
好主意，我现在将应用范围进行测试。
它有效@nubinub，请添加一个答案以将其标记为正确并给你+1。非常感谢！

标签： javascript html angularjs

【解决方案1】：

function onPhotoURISuccess(imageURI) {
  // Get image handle
  $scope.$apply(function(){
    $scope.vendordata.galerias[$scope.elementoSek].url = imageURI;
  });
}

由于您使用的navigator.camera.getPicture函数不是角度的一部分，您需要将回调包装到$scope.$apply中以触发$digestcycle，这将使您的模型更改在视图上生效。

【讨论】：

非常感谢您的帮助@nubinub，它运行良好。