Question

我们如何通过数据属性根据角度js中的屏幕大小更改图像源。请在角度js中建议适当的方法。

  <img src="abc.jpg" data-desktop="abc.jpg" data-tablet="xyz.png" data-mobile="bcd.jpg" >

Answer 1

您可以使用自定义指令实现此目的。见工作人员：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);
        }
      }
    }
  };
}])

Answer 2

而不是使用src =＆＃34; ...＆＃34;你可以使用ng-src = someFunctionInYourController（）来返回相应的图像文件名。

如果您正在使用Bootstrap，Angular Material等，则可以使用指令根据媒体查询显示内容。此外，AngularMaterial还提供$ mdMedia服务，可以帮助您解决此问题。

通过角度js中的数据属性根据屏幕大小更改图像源

2 个答案: