Here is a snippet from index.html:
<img ng-src="{{ImageURL}}" my-image/>
This is from 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!
});
};
}]);
If you're curious or have a solution, check out the plunk. How can I retrieve the new dimensions of the image element in my custom directive when the ngSrc attribute changes? My suspicion is that there may be an issue with how I'm utilizing scope.$watch.