Question

我有一个ng-repeat指令来显示6张图片。我做一个AJAX调用来将照片从服务器获取到应用程序。所有数据都存储在名为供应商数据的范围var中。然后，在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不会更新所选图片。我该如何更新？

Answer 1

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

由于您使用的navigator.camera.getPicture函数不是角度的一部分，因此您需要将回调包装到$scope.$apply以触发$digest循环，这将使您的模型更改对观点有效。

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

1 个答案: