Angular bind non-Angular Event to scope

Question

Is it possible to bind a non-angular event to a $scope-Function?

I have a DIV. In this DIV, I'm not allowed to bind the ngClick-Event and I should bind the "customclick"-Event. So I tried the following but obviously this executes the function on $apply rather than telling the framework to use the function as the eventhandler:

<div id="myCustomDiv" customclick="{{ setSelectedTab() }}">
  ...
</div>

Is this even possible or can $scope-Functions only bind to angular-Directives? I could do it in the controller with $(element).bind but I'd rather have this part in the view where it belongs.

maybe not allowed was the wrong expression. It's just not the event I want to listen to as this component throws a customclick event in special cases and ngClick doesn't capture them. — NoRyb, Jun 18 '14 at 09:20

score 0 · Accepted Answer · edited May 23 '17 at 12:07

See How do I access the $scope variable in browser's console using AngularJS? for detailed examples of accessing $scope from non-Angular sources.

In your case, I believe the following will work:

<div id="myCustomDiv" 
     customclick="angular.element('#myCustomDiv').scope().setSelectedTab()">
  ...
</div>

This approach requires that you not run Angular in Production Mode so that you have access to the scope() function.

Angular bind non-Angular Event to scope

1 Answers1