web-dev-qa-db-ja.com

AngularJS-イメージ「onload」イベント

AngularのみでjqLit​​eで画像 'onloadイベントをキャッチする正しい方法は何ですか？私は見つけました- この質問 ですが、ディレクティブを使用した解決策が必要です。
だから私が言ったように、これは私には受け入れられません：

.controller("MyCtrl", function($scope){
    // ...
    img.onload = function () {
        // ...
    }

ディレクティブではなく、コントローラー内にあるためです。

javascriptangularjsangularjs-directiveonloadjqlite
29
Cherniv

次に、angularの組み込みイベント処理ディレクティブのスタイルで再利用可能なディレクティブを示します。

angular.module('sbLoad', [])

  .directive('sbLoad', ['$parse', function ($parse) {
    return {
      restrict: 'A',
      link: function (scope, elem, attrs) {
        var fn = $parse(attrs.sbLoad);
        elem.on('load', function (event) {
          scope.$apply(function() {
            fn(scope, { $event: event });
          });
        });
      }
    };
  }]);

Img loadイベントが発生すると、sb-load属性の式が、$ eventとして渡されるloadイベントとともに現在のスコープで評価されます。使用方法は次のとおりです。

[〜＃〜] html [〜＃〜]

<div ng-controller="MyCtrl">
  <img sb-load="onImgLoad($event)">
</div>

[〜＃〜] js [〜＃〜]

  .controller("MyCtrl", function($scope){
    // ...
    $scope.onImgLoad = function (event) {
        // ...
    }

注：「sb」は、カスタムディレクティブに使用するプレフィックスです。

33
SamBarnes

OK、jqLit​​e ' bind メソッドはその仕事をうまくやっています。こんなふうになります：

imgタグの属性としてディレクティブの名前を追加しています。私の場合、ロード後、その寸法に応じて、画像はクラス名を「horizo​​ntal」から「vertical」に変更する必要があるため、ディレクティブの名前は「orientable」になります。

<img ng-src="image_path.jpg" class="horizontal" orientable />

そして、次のような単純なディレクティブを作成しています。

var app = angular.module('myApp',[]);

app.directive('orientable', function () {       
    return {
        link: function(scope, element, attrs) {   

            element.bind("load" , function(e){ 

                // success, "onload" catched
                // now we can do specific stuff:

                if(this.naturalHeight > this.naturalWidth){
                    this.className = "vertical";
                }
            });
        }
    }
});

例（明示的なグラフィック！）： http://jsfiddle.net/5nZYZ/63/

31
Cherniv

AngularJS V1.7.ng-on-xxxディレクティブを追加しました：

<div ng-controller="MyCtrl">
  <img ng-on-load="onImgLoad($event)">
</div>

AngularJSは、ngClickなどの多くのイベントに特定のディレクティブを提供するため、ほとんどの場合、ngOnを使用する必要はありません。ただし、AngularJSはすべてのイベントをサポートしているわけではなく、新しいイベントが後のDOM標準で導入される可能性があります。

詳細については、「 AngularJS ng-on Directive API Reference 」を参照してください。

1
georgeawg

angular js。既存のプロジェクトにng-loadを追加します。

angular js のng-loadをダウンロード

npm i angular-ng-load

以下はiframeの例です。一度読み込まれるとtestCallbackFunctionがコントローラーで呼び出されます

[〜＃〜] example [〜＃〜]

JS

    // include the `ngLoad` module
    var app = angular.module('myApp', ['ngLoad']);
    app.controller('myCtrl', function($scope) {
        $scope.testCallbackFunction = function() {
          //TODO : Things to do once Element is loaded
        };

    });

HTML

  <div ng-app='myApp' ng-controller='myCtrl'> 
      <iframe src="test.html" ng-load callback="testCallbackFunction()">  
  </div>
1
Darshan Jain