0

I have this scope function 

$scope.foo = function() {
   console.log('foo')
}

What is the shortest way of calling it in a DOM event handler?

<img src='foo.jpg' onError="???">

Please note that the code is a sample. I don't need to know how to handle failing images.

Charlie
  • 22,886
  • 11
  • 59
  • 90
  • http://stackoverflow.com/questions/16349578/angular-directive-for-a-fallback-image – Rayon Apr 30 '16 at 04:12
  • see this anwer http://stackoverflow.com/questions/36834527/remove-on-img-with-ng-src-border-remains/36834559#36834559 – Hadi J Apr 30 '16 at 04:21

2 Answers2

1

This solves the issue:

<img src='foo.jpg' onError="angular.element(this).scope().foo()">
Charlie
  • 22,886
  • 11
  • 59
  • 90
  • Yes it does the job but has bad affects with scope nesting because of this context.You may want to select the right element for right scope variable. Please see http://jsfiddle.net/Lvc0u55v/3314/ for better understanding. – ravichandra reddy May 01 '16 at 12:08
  • It will automatically select the right controller if you use `this` – Charlie May 02 '16 at 05:38
  • It's selects the right controller ,but it may not be the controller you would be expecting to get selected.please see the jsfiddle for better explanation. – ravichandra reddy May 02 '16 at 05:42
  • 1
    `angular.element(this).scope()` always selects the right scope even when there are child scopes. Please observe the fiddle carefully. – Charlie May 02 '16 at 05:56
-1

Please see following code.Using this approach scope function can be called without any nested scoping issue. 

 <div id="myctrl" ng-controller="MyCtrl">

     <div ng-controller="DemoCtrl">
       <img src='foo.jpg'onError="angular.element(document.getElementById('myctrl')).scope().foo()">
    </div>

</div>
ravichandra reddy
  • 209
  • 1
  • 5