Resim açısına göre açısal ng-sınıfı

Question

Görüntü en boy oranına bağlı olarak ng-sınıfı (içten-tekrar) nasıl ayarlayabilirim?

gibi bir şey ...

<div ng-repeat="img in images" style="width: 100px; height: 100px;"> 
    <img ng-src="{{img}}" ng-class="{'wide': img.width/img.height > 1, 'tall': img.width/img.height <= 1}" /> 
</div> 

DÜZENLEME: Burada asıl sorun için resmin bekliyor :(

Answer 1

CSS nesne-fit ... çünkü IE benim için çalışmıyor img json nesnesindeki width/height özelliklerini ayarlamadan önce yükle Bu şekilde bir şey çalışacaktır ..

Önemli: Scope.apply - Kapsamı açısal olmayan bir bağlamda değiştirdiğiniz için, yani jQuery'de kapsamı çağırın, böylece digest-watch döngüsü oluşur ve variabl doğru şekilde kurulur.

Plunker

HTML:

<img ng-src="{{img}}" image-set-aspect ng-class="{'wide': img.width/img.height > 1, 'tall': img.width/img.height <= 1}" /> 

Yönergesi: çalışması lazım benziyor

app.directive('imageSetAspect', function() { 
    return { 
     scope: false, 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
     element.bind('load', function() { 
      // Use jquery on 'element' to grab image and get dimensions. 
      scope.$apply(function() { 
       scope.imageMeta.width = $(element).width(); 
       scope.imageMeta.height = $(element).height(); 
       console.log(scope.$parent.imageMeta); 
      }); 
     }); 
     } 
    }; 
});