AngularJS img ng-src绑定不起作用 [英] AngularJS img ng-src binding doesn't work

查看:47
本文介绍了AngularJS img ng-src绑定不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm trying to bind the ng-src of a img with a $scope variable but it doesn't refresh the image when the variable changes.

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>

JS

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;
  } 
});

推荐答案

以这种方式解决

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

这篇关于AngularJS img ng-src绑定不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆