user1155141 user1155141 - 1 month ago 17
AngularJS Question

using ng-if to make p appear if image is null

I want to make a

<p>
appear if an image is missing from the image source. So if there is an image show the image if there is no image show the stuff in the
<p>
tag.



<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>




Answer

Directive to handle images

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>