Angularjs：イベントプリロードの背景画像

Question

私は、指令を使用してAngularJsでスライダを構築していますが、問題があります。

.controller("HomeController",["$scope","$rootScope", function($scope, $rootScope) { 

      (function getData() { 
        //do async call that return data 
        $scope.images = data; 
       }, function(err) { 
        console.log(err); 
       }); 
      })(); 
     } 
    ]); 

そして今、私は私の指示のコード表示することができます：：今

.directive('sliderDirective', function($rootScope, $interval) { 
      return { 
       restrict: 'E', 
       templateUrl: 'html/.../slider.html', 
       replace: true, 
       scope: { 
        images: '=' 
       }, 
       link: function(scope, element, attrs) { 

        scope.currentIndex = 0; 

        scope.next = function() { 
         scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0; 
        }; 

        scope.prev = function() { 
         scope.currentIndex > 0 ? scope.currentIndex-- : scope.currentIndex = scope.images.length - 1; 
        }; 

        scope.$watch('currentIndex', function() { 
         scope.images.forEach(function(image) { 
          image.visible = false; // make every image invisible 
         }); 

         scope.images[scope.currentIndex].visible = true; // make the current image visible 


         $rootScope.showSlider = true; 
        }); 

        $interval(function() { 
         scope.next(); 
        }, 10000); 
       } 
      }; 
     }); 

をこれが

<div class="loading" ng-hide="$root.showSlider"> 
    <div class="logo"> 
     <img class="" ng-src="./img/logo.png"> 
    </div> 
</div> 

<slider-directive images="images" ng-show="$root.showSlider" ng-if="images"/> 

は今、私はスニペットにコントローラを表示私のhome.htmlのコードです私の問題は、スライダにある背景の画像が読み込まれているときに読み込みを取り除くことができ、悪影響を与えずにスライダを表示できるときにわかります。すべての画像や最初の画像がロードされた時を教えてくれるメソッドはありますか？ありがとう

Answer 1

最初のイメージ（またはすべてのイメージ - それはあなたによって異なります）には、単に 'load'イベントハンドラを添付することができます。この質問を見てください：

AngularJS - Image "onload" event

SamBarnesは、簡単にロードイベントハンドラをアタッチし、角度コントローラ内の機能とそれを接続することができますシンプルで素敵なディレクティブを作成しました。

編集

私はimageLoadedディレクティブで試料溶液を提示します。

1.画像・ロードディレクティブ

angular.module('your_module') 
    .directive('imageLoaded', ['$parse', ImageLoadedDirective]); 

function ImageLoadedDirective($parse) { 
    return { 
     restrict: 'A', 
     scope: { 
      imageLoaded: '&' 
     }, 
     link: function (scope, elem, attrs) { 
      elem.on('load', function (event) { 
       scope.$apply(function() { 
        if (angular.isFunction(scope.imageLoaded)) { 
         scope.imageLoaded(); 
        } 
       }); 
      }); 
     } 
    }; 
} 

2.スライダテンプレート（画像と簡単なNGリピート）

... 

<div ng-repeat="image in images"> 
    <img ng-src="{{ image.src }}" image-loaded="imageLoadHandler()" /> 
</div> 

... 

3.スライダーディレクティブ

... 

link: function(scope, element, attrs) { 

    // Number of currently loaded images 
    scope.loadedImagesCount = 0; 

    // Function executed when image is loaded 
    scope.imageLoadHandler = function() { 

     // Increase counter 
     scope.loadedImagesCount++; 

     // Check if number of loaded images equals slider's images count 
     if(scope.loadedImagesCount == scope.images.length) { 

      // Do something, when all images are loaded 
      alert('all loaded'); 
     } 
    } 

... 

説明 IがNGリピート内部要素のimg画像装填指令を添付し、各画像がロードされたときに、スライダーのコントローラに通知するために使用されます。スライダディレクティブのスコープでは、カウンタとインクリメントする単純なハンドラを追加し、すべてのイメージがロードされているかどうかを確認します。