Exploring the Functionality of ngMousedown and ngMouseup in AngularJS

Question

Exploring the Functionality of ngMousedown and ngMouseup in AngularJS

Is it viable to apply ngMousedown to add a class to a div, and then use ngMouseup to remove the class once more? Currently, I am utilizing ng-mousedown="activateClass()". Within the activateClass() function, I modify $scope.className="data-active", which is then altered again with another function on ng-mouseup. Utilizing ng-class to incorporate the "data-active" class. I prefer not to utilize $scope.className and alter it through a controller function since this function is utilized for multiple divs, and I do not wish to add the class to all of them.

Appreciate your help!

javascript class angularjs

Answer 1

Answer №1

It's important for controllers to remain agnostic of your DOM structure. The functionality you're attempting seems better suited for a directive. You could create a custom directive like this:

app.directive("highlight", function() {
  return function(scope, element, attrs) {
    element.on('mouseup', function(event) {
      element.removeClass(attrs.highlight)
    })
    element.on('mousedown', function(event) {
      element.addClass(attrs.highlight)
    })
  }
})

Then, you can use this directive on a div element as shown below:

<div highlight="active">
      my content goes here
</div>

In this case, active would be the name of the CSS class being applied.

Answer 2

It's important for controllers to remain agnostic of your DOM structure. The functionality you're attempting seems better suited for a directive. You could create a custom directive like this:

app.directive("highlight", function() {
  return function(scope, element, attrs) {
    element.on('mouseup', function(event) {
      element.removeClass(attrs.highlight)
    })
    element.on('mousedown', function(event) {
      element.addClass(attrs.highlight)
    })
  }
})

Then, you can use this directive on a div element as shown below:

<div highlight="active">
      my content goes here
</div>

In this case, active would be the name of the CSS class being applied.

Answer 3

Answer №2

Is this what you were looking for?

<div ng-click="toggleMenu()" 
     ng-focus="menuVisible=true" 
     ng-blur="menuVisible=false" 
     ng-class="{active: menuVisible}">toggle</div>

Answer 4

Is this what you were looking for?

<div ng-click="toggleMenu()" 
     ng-focus="menuVisible=true" 
     ng-blur="menuVisible=false" 
     ng-class="{active: menuVisible}">toggle</div>

Answer 5

Answer №3

To achieve this, you can make use of ng-events in conjunction with ng-class:

<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-animate.min.js"></script>
</head>
<body>
<input type="button" value="click me" ng-mousedown="className='data-active'" ng-mouseup="className=''">
<br>
<span class="base-class" ng-class="className">Sample Text</span>
</body>
</html>

Answer 6

To achieve this, you can make use of ng-events in conjunction with ng-class:

<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-animate.min.js"></script>
</head>
<body>
<input type="button" value="click me" ng-mousedown="className='data-active'" ng-mouseup="className=''">
<br>
<span class="base-class" ng-class="className">Sample Text</span>
</body>
</html>

Answer 7

Answer №4

To avoid relying on a controller, simply include the code ng-mousedown="className='data-active'" directly within your view.

Answer 8

To avoid relying on a controller, simply include the code ng-mousedown="className='data-active'" directly within your view.

Exploring the Functionality of ngMousedown and ngMouseup in AngularJS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Pass the JavaScript variable and redirect swiftly

Creating a Dynamic System for Converting Numeric Digits to Alphabetical Grades

Utilizing WordPress to dynamically update the footer content on a targeted webpage by modifying the HTML/PHP/JS code

Unlocking the Magic of JSONP: A Comprehensive Guide

The dynamic scope variable in AngularJS is failing to update after a successful HTTP POST request

Displaying HTML elements in a specific order using ng-repeat

Tokenizing with jQuery UI

retrieving embedded content from an iframe on Internet Explorer version 7

What is the best way to obtain the output produced by a function when a button is clicked

Issues with AngularJS ng-class not functioning correctly with conditions

What are the recommended callbacks for initiating ajax calls and managing files/chunks during dropzone chunk uploading?

Creating a step wizard form with ReactJs can be accomplished by breaking down the form into

jQuery for Revealing or Concealing Combinations of Divs

Troubleshoot your Vue.js application using Visual Studio Code. Encounter an unidentified breakpoint error

difficulty receiving the information promptly via an AJAX request (utilizing AJAX and the 'for' loop)

Is it possible to adjust the block size for infinite scrolling in Ag-Grid?

Utilizing DOMPDF in conjunction with jQuery to generate PDF files

Having trouble inserting an image using Vue?

Changing the border color of an input field to red when an alert is dismissed

Exploring the concept of JavaScript nested promise scopes within the context of AngularJS