AngularJS：占位符没有显示

Question

我的代码应该同时显示两个img元素。两个img的范围在控制器中定义，但只有一个imgs在默认情况下显示在上下文中。以下是我的完整源代码：

Controller.js

.controller("ExampleController", function($scope, $cordovaCamera) {

    $scope.takePicture = function() {
        var options = { 
            quality : 75, 
            destinationType : Camera.DestinationType.DATA_URL, 
            sourceType : Camera.PictureSourceType.CAMERA, 
            allowEdit : false,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 350,
            targetHeight: 350,
            popoverOptions: CameraPopoverOptions,
            correctOrientation: true,
            saveToPhotoAlbum: false
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
            $scope.imgURI = "data:image/jpeg;base64," + imageData;
        }, function(err) {
            // An error occured. Show a message to the user
        });
    };

    //beginning of select from gallery scope

    $scope.ImageURI = 'Select Image';
    function UploadPicture(imageURI) {

        $scope.ImageURI =  imageURI;
        $scope.$apply(); 
        alert($scope.ImageURI );
    }

    $scope.ShowPictures = function() {
        navigator.camera.getPicture(UploadPicture, function(message) {
                alert('get picture aborted!');
            }, {
                quality: 75,
                destinationType: navigator.camera.DestinationType.FILE_URI,
                sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
                targetWidth: 200,
                correctOrientation: true,
                allowEdit : false,
                encodingType: Camera.EncodingType.JPEG,
                targetHeight: 200
            }
        );
    };

})

的index.html

<div class="item item-image">
    <img ng-show="ImageURI !== undefined" ng-src="{{ImageURI}}" style="max-width: 40%">
    <img ng-show="ImageURI === undefined" ng-src="http://placehold.it/300x300" style="max-width: 100%">
</div>

<div class="item item-image">
    <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" style="max-width: 40%">
    <img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300" style="max-width: 100%">
</div>

此行未显示在视图中

<img ng-show="ImageURI === undefined" ng-src="http://placehold.it/300x300" style="max-width: 100%">

Answer 1

控制器

.controller("ExampleController", function($scope, $cordovaCamera) 
{   
    //=======================TAKE PIC-===========================//

    $scope.imgURI = "http://placehold.it/300x300";

    $scope.takePicture = function() 
    {
        var options = { 
            quality : 75, 
            destinationType : Camera.DestinationType.DATA_URL, 
            sourceType : Camera.PictureSourceType.CAMERA, 
            allowEdit : false,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 350,
            targetHeight: 350,
            popoverOptions: CameraPopoverOptions,
            correctOrientation: true,
            saveToPhotoAlbum: false
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
            $scope.imgURI = "data:image/jpeg;base64," + imageData;
        }, function(err) {
            // An error occured. Show a message to the user
        });
    };

    //=============================CAMERA===============================//

    $scope.ImageURI = "http://placehold.it/300x300";

    function UploadPicture(imageURI) 
    {
        $scope.ImageURI =  imageURI;
        $scope.$apply(); 
        alert($scope.ImageURI );
    }

    $scope.ShowPictures = function() 
    {
        navigator.camera.getPicture(UploadPicture, function(message) 
        {
                alert('get picture aborted!');
            }, {
                quality: 75,
                destinationType: navigator.camera.DestinationType.FILE_URI,
                sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
                targetWidth: 200,
                correctOrientation: true,
                allowEdit : false,
                encodingType: Camera.EncodingType.JPEG,
                targetHeight: 200
            }
        );
    };
})

HTML

<div class="item item-image">
    <img ng-src="{{ImageURI}}" style="max-width: 40%">
</div>

<div class="item item-image">
    <img ng-src="{{imgURI}}" style="max-width: 40%">
</div>