Das Hauptproblem hier ist für das Bild zu warten lade vor dem Einstellen der width/height Eigenschaften auf dem Objekt img json So funktioniert so etwas
Wichtig: Scope.apply - Weil Sie den Bereich in einem nicht-eckigen Kontext ändern, dh in jQuery müssen Sie Rufen Sie scope.apply auf, damit der Digest-Watch-Zyklus und der Variabl Es wird richtig eingerichtet.
Plunker
HTML:
<img ng-src="{{img}}" image-set-aspect ng-class="{'wide': img.width/img.height > 1, 'tall': img.width/img.height <= 1}" />
Richtlinie:
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);
});
});
}
};
});
, das wie es aussieht, sollte funktionieren. Funktioniert es nicht für dich? – Lex
Nop ... "img.width" ist keine Eigenschaft von img array .... Ich möchte die Bildbreite und -höhe bekommen, aber ich weiß nicht, wie –
Oh, ha ... Gotcha. Hilft [diese Antwort] (http://stackoverflow.com/a/14508318/548997)? Klingt so, als müssten Sie eine Direktive schreiben (was ziemlich normal ist, wann immer Sie anfangen wollen, sich mit dem DOM herumzuschlagen). – Lex