Visualizza l'immagine nelle sue dimensioni reali in angular.js

Question

Ho bisogno di visualizzare un'immagine nelle sue dimensioni reali, anche se è più grande del suo contenitore. Ho provato il trucco di usare variabili Immagine e capturing the size on load con qualcosa di simile:

HTML:

<div ng-controller="MyCtrl"> 
    <input ng-model="imageurl" type="url" /> 
    <button ng-click="loadimage()" type="button">Load Image</button> 
    <img ng-src="{{image.path}}" 
     style="width: {{image.width}}px; height: {{image.height}}px" /> 
</div> 

Javascript:

.controller("MyCtrl", ["$scope", function ($scope) { 
    $scope.image = { 
     path: "", 
     width: 0, 
     height: 0 
    } 
    $scope.loadimage = function() { 
     var img = new Image(); 
     img.onload = function() { 
      $scope.image.width = img.width; 
      $scope.image.height = img.height; 
      $scope.image.path = $scope.imageurl; 
     } 
     img.src = $scope.imageurl; 
    } 
}]); 

Questo script funziona, ma solo dopo che il pulsante viene premuto più volte se l'immagine è grande

Cosa devo fare per farlo funzionare in un clic?

C'è un modo migliore per scoprire la dimensione dell'immagine di questo?

Answer 1

È necessario utilizzare $scope.$apply, altrimenti qualsiasi modifica $scope fatti in gestori di eventi non-angolare non verranno elaborati correttamente:

img.onload = function() { 
    $scope.$apply(function() { 
    $scope.image.width = img.width; 
    $scope.image.height = img.height; 
    $scope.image.path = $scope.imageurl; 
    }); 
} 

Answer 2

può essere non è ancora tardi per ricostruire tutto secondo alle direttive "modello". La mia soluzione per il problema simile (link) ottenuto diversi up-voto e mi induce a pensare che si tratta di un approccio convenzionale .. Date un'occhiata:

HTML: 
    <div ng-controller="MyCtrl"> 
     <input ng-model="image.tmp_path" type="url" /> 
     <button ng-click="loadimage()" type="button">Load Image</button> 
     <img ng-src="{{image.path}}" preloadable /> 
    </div> 

CSS: 
    img[preloadable].empty{ 
     width:0; height:0; 
    } 

    img[preloadable]{ 
     width:auto; height:auto; 
    } 

JS: 
    // Very "thin" controller: 
    app.controller('MyCtrl', function($scope) { 
     $scope.loadimage = function() { 
      $scope.image.path = $scope.image.tmp_path; 
     } 
    }); 

    // View's logic placed in directive 
    app.directive('preloadable', function() {   
     return { 
      link: function(scope, element) { 
      element.addClass("empty"); 
      element.bind("load" , function(e){ 
       element.removeClass("empty"); 
      }); 
      } 
     } 
    }); 

lavoro Plunk: http://plnkr.co/edit/HX0bWz?p=preview

Answer 3

Questo ha funzionato per me (utilizzando Twitter bootstrap per le classi):

lima mainfile.js (in prodotti array):

{ 
    name: 'Custom Products', 
    size: {width: 15, height: 15},  
    images:{thumbnail:"img/custom_products/full_custom_3.jpg"} 
} 

file index.html:

 <div class="gallery"> 
     <div class="img-wrap"> 
      <ul class="clearfix"> 
       <li class="small-image pull-left thumbnail"> 
        <img ng-src="{{product.images.thumbnail}}" style="height:{{product.size.height}}em; width: {{product.size.width}}em" /> 
       </li> 
      </ul> 
     </div> 
     </div>