Ich habe eine Reihe von Bildern, die ich aus einer externen Quelle im Hosting an anderer Stelle auf einer Seite über eine MVC-Datei und in eine eckige ng-src.angualr js - stoppe die Anzeige von Bildern einmal Überlauf ist erreicht
z.
<div ng=repeat="img in Images">
<img ng-src={{img.path}} style="height:100px;width:auto" />
</div>`
In diesem Fall weiß ich, dass der img.path immer auf die externen C# mvc wird und einen Filestream zum Inhalt zurück.
Ich möchte nur eine bestimmte 'summierte' Breite der Bilder auf dem Bildschirm anpassen - so dass ich keine Bilder habe, die halb so aussehen, als würde ich "overflow: hidden" in einem Elternteil verwenden.
Gibt es einen Weg, ich kann ng-wiederholen, um fortzufahren, bis das nächste Bild überlaufen würde (und damit den Überlauf insgesamt verhindern)? Die Größe der Bilder wird so geändert, dass ihre Höhe auf 100 Pixel und die Breite proportional auf diese Größe eingestellt ist. `
dachte ich, die unter Richtlinie den Trick tun würde, aber es scheint, die Bilder aus irgendeinem Grund neu zu skalieren ..
App.directive('styleParent', function() {
return {
restrict: 'A',
link: function (scope, elem, attr) {
elem.on('load', function() {
var w = $(this).width(),
h = $(this).height();
var xPos = angular.element(this).prop('offsetLeft');
xPos += w;
var div = elem.parent();
var d_width = div.width();
var d_xPos = angular.element(div).prop('offsetLeft');
d_xPos += d_width;
console.log([xPos, d_xPos, this])
if (xPos > d_xPos) {
angular.element(this).hide();
}
});
}
};
});