Retrieving current element in AngularJS using jQuery

Question

Retrieving current element in AngularJS using jQuery

I have 4 templates, each with mouse actions that trigger functions:

ng-mouseover="enableDragging()" ng-mouseleave="disableDragging()"

Within these functions, I update scope variables and would like to add a class using jQuery without passing any parameters or updating additional scope variables.

Essentially, I am searching for a simple way to apply a class or id to all 4 templates without specifying the current template.

If there's a better approach, here's the scenario: I aim to modify scope variables AND adjust the CSS of a div upon entering that div, then revert back once leaving.

Thank you

javascript jquery css angularjs hover

Answer 1

Answer №1

When using the ng-mouseover directive, make sure to pass $event as a parameter to the callback function in order to access the element reference.

ng-mouseover="enableDragging($event)"

In your controller:

function enableDragging(event){
  var element = event.target;
  console.log(element)
}

To dynamically update the class of a DOM node based on a condition, you can utilize the ng-class directive.

Answer 2

When using the ng-mouseover directive, make sure to pass $event as a parameter to the callback function in order to access the element reference.

ng-mouseover="enableDragging($event)"

In your controller:

function enableDragging(event){
  var element = event.target;
  console.log(element)
}

To dynamically update the class of a DOM node based on a condition, you can utilize the ng-class directive.

Retrieving current element in AngularJS using jQuery

Answer №1

Similar questions

serving JSON and HTML responses using a PHP script

Formik state is mysteriously reverting field values to their default state

The loading icon from Font Awesome is not appearing on the WooCommerce Admin list

Easily transfer files without the need to refresh the page by utilizing the power of AJAX

Commitment to provide the outcome of the second promise in case the first one encounters

A guide on invoking a JavaScript function within a dropdown menu based on selection instead of change event

Transform basic list into a two-dimensional array (grid)

Angular Square Grid Design

Monitor the current playing status of a YouTube video across any webpage

Updating Object Properties in Vue.js 2.0 using Methods

Exploring methods to verify a service subscription to a topic provided by a different service

Conceal and unveil stationary navigation when scrolling back to the very top of the screen

Can TSLint and ESLint give a warning when a function is accessed as a property?

The box on my form is leaking my background color outside the 1px border, but only in Internet Explorer

Woocommerce Dual Column Payment Portal

Getting the userID variable in a pop-up modal in PHP

Generating a two-dimensional array and setting its values in JavaScript

Gathering information from the server once it has completed its processing phase

The md-datepicker component is disregarding the specified custom margin

How can I make the arrows work on a secondary slider with EasySlider1.7?