角度のある1ウェイの反応性のあるソースイメージは、良いか悪いですか？

Question

私は、異なる画像ソースを使用する指示をどのように使用するのかを理解していますが、良いか悪いのか分かりません。誰か私にいくつかの提案を与えることができますか？ここに私のコードは HTML

<img responsive-src 
    mobile="test1" 
    desktop="test2" /> 

JS指令

app.directive('responsiveSrc',function($window, $timeout){ 

    return { 
     restrict: "AEC", 
     scope: { 
      mobile: '=', 
      desktop: '=' 
     }, 
     link: function(scope, element, attrs, controller, transcludeFn){ 

      scope.width = $window.innerWidth; 

      angular.element($window).on('resize load', function(){ 

       scope.width = $window.innerWidth; 

       $timeout(function(){ 

        if(scope.width >= 768){ 
         element.attr('src', scope.desktop);      
        } else { 

         element.attr('src', scope.mobile); 
        } 

       }, 300); 


       // scope.$digest(); 
      }) 

     } 

    } 
}); 

JSコントローラー

ある

app.controller('myCtrl', ['$scope', '$http', function($scope, $http){ 

     $scope.test1 = "http://lorempixel.com/400/200/sports"; 
     $scope.test2 = "http://lorempixel.com/400/400/sports"; 

    }]); 

私はダイジェストを使用している人々のいくつかを見ましたが、私が使用している場合は、値が変化していきますサイズを変更私はまだダイジェストを使用する必要がありますので、ウィンドウのサイズが変更されている間ですか？それは実際には何をしていますか？

Answer 1

あなたが聞いた質問は、漠然としていますが、私がここで理解していることからです。 scope。$ digest（）はダイジェストサイクルを手動でトリガするために使用されます。角度1のダイジェストサイクルは、前回のダイジェストサイクル以降のデータの変化をチェックするためにデータモデルのウォッチャーを起動するために使用されます（データ変更をチェックするために使用されます）。ダイジェストサイクルを引き起こす他の角度指令があります。たとえば、コードで使用した$ timeoutはダイジェストサイクルをトリガーします。したがって、作成したコードが機能する可能性があります。 また、スコープ$ digestを使用するのではなく、scope.apply（）を呼び出して$ rootScope。$ digest（）関数を呼び出します。

Answer 2

代わりにsrcsetを使用してください。これは、すべてのブラウザでネイティブにサポートされています。

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="my alternate text">

は不要なのjavaスクリプトをレンダリングするより

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x">

これはあなたの時間を節約する、ブラウザをお読みください。