在AngularJS上范围更改后检测图像加载

在angular上，我希望在范围发生变化后检测何时加载图像

我有这个：

<img ng-src="/uploads/screenshots/{{screenshot.imageURL}}" screenshotimageonload>

并检测范围内的变化，如下所示：

angular.module('app').directive('screenshotimageonload', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.$watch('screenshot', function () {
        console.log("Image url change !");
      });
    }
  }
});

---

但我不知道如何将它们结合起来。

所以，我找到了我要找的东西

这把小提琴对我帮助很大：

这就是我所做的：

angular.module('app').directive('screenshotimageonload', function () {
    return {
        restrict: 'A',

        // Bind the DOM events to the scope
        link: function (scope, element, attrs) {

            // Check when change scope occurs
            scope.$watch('screenshot', function () {
                if (scope.screenshot) {
                    console.log("New image url : " + scope.screenshot.imageURL);
                }
            });

            // When new image is loaded
            element.bind('load', function () {
                console.log("New image url is loaded ! " + scope.screenshot.imageURL);
            });
        }
    };
});

本指令是否有助于他人

angular.module('app').directive('screenshotimageonload', function () {
    return {
        restrict: 'A',

        // Bind the DOM events to the scope
        link: function (scope, element, attrs) {

            // Check when change scope occurs
            scope.$watch('screenshot', function () {
                if (scope.screenshot) {
                    console.log("New image url : " + scope.screenshot.imageURL);
                }
            });

            // When new image is loaded
            element.bind('load', function () {
                console.log("New image url is loaded ! " + scope.screenshot.imageURL);
            });
        }
    };
});