AngularJS img ng-src 绑定不起作用答案

【问题标题】：AngularJS img ng-src binding doesn't workAngularJS img ng-src 绑定不起作用
【发布时间】：2018-10-26 09:09:27
【问题描述】：

我正在尝试将 img 的 ng-src 与 $scope 变量绑定，但是当变量更改时它不会刷新图像。

HTML

<body ng-app="CameraApp" ng-controller="cameraController">
<br/><br/>
<div align="center">
    <img id="myImage" ng-src="{{ imageSrc }}" ng-click="TakePicture();"/><br/><br/>
    <input type="button" ng-click="TakePicture();" value="TAKE PICTURE" /><br/><br/>
    <input type="button" ng-disabled="{{ savePict }}" value="SAVE PICTURE"/>
</div>

var app = angular.module('CameraApp', ['ngTouch']);

app.controller('cameraController', function ($scope) {

$scope.savePict = true;
$scope.imageSrc = '';


$scope.TakePicture = function () {
    navigator.camera.getPicture(onSuccess, onFail, {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI
    });
}

function onSuccess(imageUri) {
    $scope.imageSrc = imageUri;
}

function onFail(message) {
    alert('Failed because: ' + message);
    document.getElementById("myImage").src = "";
    $scope.savePict = true;
  } 
});

【问题讨论】：

绑定 ng-click 图像外的其他地方

标签： angularjs

【解决方案1】：

这样解决

function onSuccess(imageUri) {
    $scope.$apply(function () {
        $scope.imageSrc = imageUri;
    })
}

【讨论】：

如果您在TakePicture 中使用$window.navigator 而不是navigator，您实际上可能无需调用$apply 就可以使其工作，因为一切都保持在AngularJS 同步中。