Question

如果图像源中缺少图像，我想显示<p>。因此，如果有图像显示图像，如果没有图像显示<p>标记中的内容。

＆＃13;

<div id="logo">
  <img src="{{selected_.image}}">
  <div ng-if="selected_.image == ''">

    <p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
    </p>
  </div>
</div>

＆＃13;

Answer 1

在这里，我为下面的plz检查链接做了一个工作示例。

https://jsfiddle.net/hirojaisinghani/pxwbyuLL/27/

Plz检查一下。

    <div ng-app="ImageDisplay">
    <div id="logo" ng-controller="ImageController">
    <div>
    <h3>
    First Image
    </h3>
    <img ng-if="selected_.image1 != ''" src="{{selected_.image1}}" height="100px" width="50px" /></div>
                      <div ng-if="selected_.image1 == ''">

                        <p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
                        </p>
                  </div>
                  <div>
    <h3>
    Second Image
    </h3>

                  <img ng-if="selected_.image2 != ''" src="{{selected_.image2}}" />              </div>
                      <div ng-if="selected_.image2 == ''">

                        <p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>
                        </p>
                  </div>
                </div>
      </div>
var app = angular.module('ImageDisplay', []);

app.controller('ImageController', function($scope) {
$scope.selected_ = {
image1:null,
image2:null
};
    $scope.selected_.image1= 'https://cdn0.iconfinder.com/data/icons/metro-style-people-svg-icons/48/User_login-512.png';
//  alert($scope.selected_.image1);
  $scope.selected_.image2 = '';
    $scope.discardIntroPage = function() {
    alert('Add Photo');
  }
});

Answer 2

处理图像的指令

var app = angular.module("app", []);

app.directive("imageLoading", function ($rootScope, $timeout) {
    return {
        restrict: "A",
        scope: {
          imageLoading: "="
        },
        link: function (scope, element) {
            element.on("error", function () {
              element.hide();
              scope.$apply(function(){
                scope.imageLoading = true;
              })
            });
        }
    };
});

<html ng-app="app">
  <head>
    </head>
  <body>
    
    <h4>image 1</h4>
<img image-loading="google"  src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92d.png">
    <div ng-show="google">google image not found</div>
    
    <hr>
    
      
    <h4>image 2</h4>
<img image-loading="google2"  src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <div ng-show="google2">google image not found</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    </body>
  </html>

如果图像为空，则使用ng-if使p出现

2 个答案: