5

index.html スニペット:

<img ng-src="{{ImageURL}}"  my-image/>

app.js:

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

app.controller('MyCtl', function($scope) {

  $scope.ImageURL = "";
  $scope.ImgWidth = 0;

  $scope.setImgSrc = function(imgURL) {
    $scope.ImageURL = imgURL;
  };

  $scope.setImgSrc('http://angularjs.org/img/AngularJS-large.png');

});

app.directive('myImage', [function() {

  return function(scope, elm, attrs) {

    scope.$watch(elm.width(), function(newValue, oldValue) {

      scope.ImgWidth = newValue; // always returns 0!

    });

  };

}]);

これがプランクです。img変更時にカスタム ディレクティブ内の要素の新しいサイズを取得するにはどうすればよいngSrcですか? を適切に呼び出していない気がしますscope.$watch。

4

3 に答える 3

2

SOの例はそうではありませんが、あなたのプランクの時計は正しいように見えますが、どちらもあなたが期待することをしないかもしれません。

ウォッチ式は、文字列式または関数のいずれかである必要があります。あなたの例では、elm.width()... の結果を監視しようとしていますが、これはおそらく 0 です。これは、本質的にscope.$watch(0, function() {...}). 幅を監視したい場合はscope.$watch(function() { return elm.width(); }, function() {...})、特に監視式から DOM を頻繁にヒットするのは悪い考えですが、行う必要があります。

(イベントを使用して) 画像が読み込まれるまで待機し、loadこの時点で測定値を更新することをお勧めします。DOM は、画像が更新されたときにのみヒットします。ここでプランクを更新しました。

于 2013-10-14T23:15:20.470 に答える
0

問題は $watch への呼び出しにあります。$watch は、最初の引数が評価される文字列か、呼び出して値をチェックできる関数のいずれかであることを期待しています。代わりに整数を渡しています。これを試して：

 scope.$watch(function() { return elm.width(); }, function(newValue, oldValue) {
     scope.ImgWidth = newValue;
 });

ここでプランク: http://plnkr.co/edit/93SvAosQWkQzRq0DFXaK?p=preview

width() 関数を取得するには、plunk で行った完全な jQuery も含める必要があることに注意してください。

更新 -負荷イベントの処理に関する @Andyrooger の提案に従うように plunk が更新されました。load イベント ハンドラーで幅を取得するだけでもよいのですが、$watch に関する質問の精神にとどまるために、そのままにしておきました。

于 2013-10-14T23:12:09.780 に答える
0

画像が非常に小さいため、おそらく目立ちませんが、画像が読み込まれる前に幅を取得しています。これを修正するには、要素にオンロードを追加します

app.directive('myImage', [function() {
    return function(scope, elm, attrs) {
      elm.on('load', function()
      {
        scope.ImgWidth = $(this).width();
        scope.$apply();
      });
    };
}]);
于 2013-10-14T23:13:04.313 に答える