Change directive's contents on touch


I have a directive dirA, which references an HTML template:

  <div id="content" style="width: 100px; height: 100px; background-color: red;">

now i use the directive in HTML as:


i want to change the background of div, with id=“content”, when the user touches it.
How do i do that?
Should i define a function in the directive’s controller to handle the request?

you should build an directive for that… put the directive at the dom node with the id content (you do not need the id anylonger)… add touch listener on change the bg if you touch

but for the easy way:

But on-touch only calls functions in the controller. Is there a way to call the directive’s functions?

if you directive is around the “on-touch”-element you can call that function because of the scope inheritance

in other cases use the touchevents: touchstart, touchend, touchcancel, touchmove in your directive

element.on(‘touchstart’, function () {
// on touch start do something.

It’s working now!! That’s puzzling… it didn’t work earlier.
Thank you!