angularjsでonloadイベントで処理をしたい場合どのように書くのが一般的なのでしょうか？

Question

タイトルのとおりなのですが。
今私は、よくわからなくてviewファイルに以下のように書いています。

<img src="sample.png" id="sample">
<script>
$(function() {
  $("#sample").onload= function() {
    // ここに記述
  });
});
</script>

angularjs使わないときと同じですね。。。
ただ、問題点として$scopeなどをつかって処理を行うことができません。。
angularjs的な書き方を教えていただけないでしょうか。

Answer 1

要するに、ng-clickみたいなdirectiveを作ればokです。参考ソース。

サンプル実装。

app.directive('myLoad', function($parse, $rootScope) {
  return {
    restrict: 'A',
    compile: function($element, attr) {
      var fn = $parse(attr['myLoad']);
      return function ngEventHandler(scope, element) {
        element.on('load', function(event) {
          var callback = function() {
            fn(scope, {$event: event});
          };
          if ($rootScope.$$phase) {
            scope.$evalAsync(callback);
          } else {
            scope.$apply(callback);
          }
        });
      };
    }
  };
});

<img my-load="log('hello')" src="https://docs.angularjs.org/img/angularjs-for-header-only.svg">

サンプル実装のデモ。