Spin the AngularJS icon in a complete 360-degree clockwise rotation

Hey there! I'm new to Angular and I'm trying to create a button that will make an icon inside rotate 360 degrees when clicked. Right now, the entire button is rotating instead of just the element inside it. I want only the "blue square" to rotate when the button is clicked. (I know that currently the rotation is applied to the button itself because ng-click is on the button and not on the div.box)

Here's the HTML Code:

<button ng-controller="fullRotation" ng-click="fullRotate()">Rotate
     <div class="box"></div>
</button>

And here's the NG Code:

var app = angular.module('app', []);

var fullRotation = function ($scope, $element) {
     var degrees = 360;
     $element.css('transition', '-webkit-transform 800ms ease');

     $scope.fullRotate = function() {
          $element.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
          degrees += 360;
     };
}

If you want to see a demo, click here.

javascriptangularjsrotation

Answer №1

It was a straightforward response from a concerned parent searching for their child.

For those seeking this solution later on, I consolidated all .css() calls into the fullRotate function and included children()

$scope.fullRotate = function() {
     console.log('im here');
     $element.children().css('transition', '-webkit-transform 800ms ease');
     $element.children().css('-webkit-transform', 'rotate(' + degrees + 'deg)');
     degrees += 360;

};

See demo - Compatible with Chrome only

Answer №2

When you click the blue box, only the blue box rotates.

 <button >Rotate

    <div class="box" ng-controller="fullRotation" ng-click="fullRotate()"></div>

  </button>

The blue box will rotate when you click the button.

  $scope.fullRotate = function() {
    console.log('im here');
    $element.children().css('transition', 'transform 800ms ease');
    $element.children().css('transform', 'rotate(' + degrees + 'deg)');
    degrees += 360;
  };

Another option is to add a transition to the button's CSS.

/* Styles go here */
.box{
    width: 70px;
    height: 70px;
    background: skyblue;
    margin: 50px;
    display: block;
    transition: 800ms ease;
}


 $scope.fullRotate = function() {
    $element.children().css('-webkit-transform', 'rotate(' + degrees + 'deg)');
    degrees += 360;
  };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Set up authentication within a separate AngularJS module

I am struggling with how to develop a standalone login page for the BlurAdmin template found on GitHub. The main structure of the template is based on index.html, which includes header, footer, sidebar, and loads pages as templates using ui-view. However, ...

javascriptangularjsauthentication

A guide to handling deep updates with subdocuments in Mongodb/Mongoose

In this scenario, I am looking to utilize mongoose. Consider a Schema structured like the following: const userSchema = new Schema({ name: { first: { type: String, required: true }, last: { type: String, required: true }, }, email: { type: S ...

javascriptnode.jsmongodbmongoose

Preventing mouse clicks on checkboxes and triggering events using JavaScript - a complete guide

We have a Table grid with multiple columns, one of which is a Select Box (CheckBox). The expected behavior is that when a row is clicked, the respective CheckBox should get checked, and clicking on the CheckBox itself should update it. I tried implementin ...

javascriptjquerycss

Combining two JSON arrays into a single array using Node.js

Two JSON arrays are available: var json1 = [{id:1, name: 'xxx' ...}] var json2 = [{sec:'A', class_name:'xyz' ...}] I am looking to combine these arrays into a single array. var finalObj = [{id:1, name: 'xxx' ...},{i ...

javascriptnode.jsjson

The issue of page content failing to refresh when loaded using AJAX technology

My script utilizes AJAX to dynamically load specific pages on a website. These pages display information that updates based on the current time. However, I have encountered an issue where the page content remains static when loaded through AJAX, almost as ...

javascriptajax

Exploring AngularJS: Retrieving a list of filenames from a specified directory

In the public directory of my application, there is a folder named 'x'. I have the path name to the folder (/path/to/dir/x) but I am unsure of the names of the files within it. How can I retrieve the file names and provide URL links to them in an ...

javascriptjqueryhtmlangularjsmeanjs

Issue with AngularJS 1.6.x: Unable to access property 'entry' as it is undefined

Check out my Plunker demo here After updating Angular from version 1.3.x to 1.6.x, I'm getting an error that says read property 'entry' of undefined I've attempted to define 'entry' as var entry = {}; and also tried using de ...

angularjs

Using $http to pass a parameter to an Angular factory

This is my AngularJS factory responsible for supplying autocomplete data: app.factory('autoCompleteDataService', ['$http', function($http) { return { getSource: function(callback, url) { var apiUrl = & ...

angularjshttp-postfactory

Content Security Policy Error triggered by Iframe Source Running Script in Web Extension

My web extension for Firefox utilizes a content script to add HTML to a webpage when a button is clicked. The injected HTML includes an iFrame nested in multiple div elements. Below is the relevant part of the content script: var iFrame = document.create ...

javascriptfirefox-addon-webextensionscontent-security-policycontent-script

Revamp your search experience with Algolia's Angular Instant Search: Design a personalized search box template

Custom Search Box Request: My goal is to implement an autosuggest search box using Algolia Angular instant search with an Angular Material design. To achieve this, I am planning to customize the search box component by replacing the standard <ais-sea ...

javascriptangulartypescriptsearchalgolia

Just starting out with callback functions (using a callback as an argument)(Javascript)

Hello everyone, I'm a beginner here and I have a question about callback functions. Upon reading about them, I felt like I understood the concept. However, when I attempted to implement one in my code, things didn't go as planned. functio ...

javascriptcallback

In Node.js, I encountered an issue where req.body was returning as undefined, despite the fact that when I logged req, I could

I am having trouble logging the req.body to the console in my Twilio text app. When I try console.log(req), the body and its contents show up, but it says that the body is undefined when I try to log it on its own. Any help would be greatly appreciated. ...

javascriptjquerynode.jsajaxexpress

The Express server automatically shuts down following the completion of 5 GET requests

The functionality of this code is as expected, however, after the fifth GET request, it successfully executes the backend operation (storing data in the database) but does not log anything on the server and there are no frontend changes (ReactJS). const ex ...

javascriptnode.jsreactjstypescriptexpress

Steps to automatically navigate to a specific Div upon page initialization

Can someone help me understand why my code is scrolling to a div and then returning back to the top of the page? $("#Qtags").click(function(){ $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}, ...

javascriptjqueryhtml

Shielding against JSON Vulnerability - fortifying asp.net MVC with angular

While reviewing the guidelines for the $HTTP service in Angular JS, I came across the "JSON Vulnerability Protection" section. In MVC 5, I'm curious about how to include the string ")]}',\n" at the beginning of a JSON response or if it' ...

asp.net-mvcangularjsasp.net-mvc-4asp.net-mvc-5angular-services

Utilize mouseover to rotate the camera in three.js

Is it possible to utilize Three.js to rotate a camera and view an object from all angles upon hovering with the mouse? ...

javascriptthree.js3dcamera

The error message 'Cannot read property 'navigate' of undefined' is displayed because the function '_this.props.navigation.navigate' is not

I'm facing an issue trying to access 'Home' from Form.js. Despite my efforts in arrowF, routes, and other methods, the same error persists. How can I resolve this? In my Form.js file, when I call onPress=(), I have tried using functions, ...

javascriptreactjsreact-native

Customized webpage content using AJAX for interactive map selections

I have integrated JQVMaps into a WordPress website to display a dynamic world map. The goal is to update the content of the page based on the region that the user clicks. Below is a snippet of the code I have implemented as a proof of concept: <div ...

javascriptphpajaxjqvmap

Displaying a custom error page in Next.js with the appropriate status code

I recently implemented a custom error page following the instructions provided in the documentation. My goal was to use this error page for specific errors that may occur during the getStaticProps function. Here's how I structured it: const Page: Next ...

javascriptreactjsnext.js

Error in Angular ESLint: The key parameter is mandatory

I'm attempting to download a file using the Angular code below, but I consistently receive an error stating Parameter "key" required const headerValues = new HttpHeaders({ 'Content-Type': contentType!, 'Accept': contentTy ...

angularjsangulareslint