5

index.html 片段：

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

应用程序.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 才会被击中。我在这里更新了 plunk 。

于 2013-10-14T23:15:20.470 回答
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 回答
0

问题在于您对 $watch 的调用。$watch 期望第一个参数是要评估的字符串或它可以调用然后检查其值的函数。您改为传递一个整数。尝试这个：

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

戳这里： http ://plnkr.co/edit/93SvAosQWkQzRq0DFXaK?p=preview

请注意，要获得 width() 函数，您还需要包含完整的 jQuery，我已经在我的 plunk 中完成了。

更新 - plunk 更新以遵循@Andyrooger 处理加载事件的建议。更好的方法是在加载事件处理程序中获取宽度，但我将其保留原样以保持关于 $watch 的问题的精神。

于 2013-10-14T23:12:09.780 回答