Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-controller="myCtrl">
    
    <!-- This works fine (banana)-->
    <my-img s="http://dioncheese.com/wp-content/uploads/2013/12/banana.jpg"></my-img><br/>
    
    <!-- This works fine too (exclamation)-->
    <my-img s="{{source}}"></my-img>
    
    <!-- This is okay also (question mark) -->
    <my-img></my-img>
    
    <!-- This puts a 404 in the console, then works (numbers). -->
    <div ng-repeat="image in imgs" style="display:inline">
      <my-img s="{{image.url}}"></my-img>
    </div>
  </div>
</body>
</html>
 
angular.module('myApp',[])
​
.directive('myImg',function(){
  return{
    restrict:'E',
    replace:true,
    scope:{s:'@'},
    template: '<img ng-src="{{s}}" width="200">',
    link: function($scope,element,attrs){
     
      attrs.$observe('s',function(value){
        if(!value){
        $scope.s = 'http://www.petermaas.nl/extinct/images/UnknownCopyrightLicence.png';
        }
        
      });
    }
  };
})
.controller('myCtrl',function($scope){
$scope.source = 'http://1.bp.blogspot.com/-jh65pQqdEow/TPutdDlZWbI/AAAAAAAAEmY/aMBHARaDgSg/s1600/ExclamationPoint-main_Full.jpg';
  
  $scope.imgs = [];
  
  for(var i=1;i<9;i++){
    $scope.imgs.push({url: 'http://www.net4tv.com/Voice/graphics/printables/83_number_' + i +'.gif'}) ;
  }
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers