我们如何通过数据属性根据角度js中的屏幕大小更改图像源。请在角度js中建议适当的方法。
<img src="abc.jpg" data-desktop="abc.jpg" data-tablet="xyz.png" data-mobile="bcd.jpg" >
答案 0 :(得分:3)
您可以使用自定义指令实现此目的。见工作人员:http://plnkr.co/edit/7oVbjaK0QQPHGjyWzfrA?p=preview
<强> HTML:强>
<img src="default.jpg" small="small.jpg" big="big.jpg" change-on-screen-resize />
<强>指令:强>
app.directive("changeOnScreenResize", ["$window", function($window) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
$window.onresize = function() {
changeImage();
scope.$apply();
}
//no such method 'on' for $window
//$window.on('resize', function(){
//});
changeImage();
function changeImage() {
var screenWidth = $window.innerWidth;
if(screenWidth <= 400) {
//attrs.src = attrs.small;
elem.attr('src', attrs.small);
} else {
elem.attr('src', attrs.big);
}
}
}
};
}])
答案 1 :(得分:0)
而不是使用src =&#34; ...&#34;你可以使用ng-src = someFunctionInYourController()来返回相应的图像文件名。
如果您正在使用Bootstrap,Angular Material等,则可以使用指令根据媒体查询显示内容。此外,AngularMaterial还提供$ mdMedia服务,可以帮助您解决此问题。