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!
});
};
}]);
这是 plunk .当 ngSrc 更改时，如何在我的自定义指令中获取 img 元素的新尺寸？我有一种感觉，我没有正确调用 scope.$watch。
最佳答案
在我看来，你的 plunk 中的 watch 是正确的，尽管 SO 上的示例不是，而且两者都不会达到你的预期。
监视表达式应该是字符串表达式或函数。在您的示例中，您正在尝试观察 elm.width() 的结果...这很可能是 0。这本质上等同于说 scope.$watch(0, function( ) {...})。如果你想看你需要做的宽度 scope.$watch(function() { return elm.width(); }, function() {...}) 虽然它是如此频繁地访问 DOM 是个坏主意，尤其是通过 watch 表达式。
更好的办法是等到图像加载完毕(使用 load 事件)并在此时更新测量值。 DOM 只会在您的图像更新时被击中。我已经更新了 plunk here .
关于javascript - 如何查看 img 元素的 ngSrc 并在我的自定义指令中获取新的宽度和高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19370325/