30

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

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

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

4

3 に答える 3

38

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 属性の式が現在のスコープで評価され、load イベントが $event として渡されます。使用方法は次のとおりです。

HTML

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

JS

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

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

于 2014-11-06T14:28:22.283 に答える
31

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

imgタグの属性としてディレクティブの名前を追加しています。私の場合、読み込み後、その寸法に応じて、画像のクラス名を「水平」から「垂直」に変更する必要があるため、ディレクティブの名前は「方向付け可能」になります。

<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/

于 2013-07-09T12:24:32.033 に答える