'This' conflicts in angular and Jquery

Issue

I am trying to migrate a angularjs application into angular. The old application had jquery functionalites. I tried using the same. Issue with 'this' element.

When loading in angular, angular takes 'this' element has its component one and jquery 'this' element doesnt show up.

Appreciate any help!!!

Solution

Just replace your arrow function in click by function.

using this inside arrow functions body will not create a new lexical context , hence your result.

Inside jQuery methods, such as click you need to use functions expressions that will allow the lexical context this to be bound to the current dom element.

Important reading about this, http://perfectionkills.com/know-thy-reference, spec about arrow functions and their pitfalls can be useful too.

Answered By - adz5A