AngularJS variable remains static

Is the value changing when viewed in the console? Check it out here: http://jsfiddle.net/LCZfd/1006/

app.controller("myCtrl", function($document) {
    let scope=this;
    this.current=0;

    this.isCurrent=function(val){
        return val==this.current;
    }
    this.selectCurrent=function(val){
        this.current=val;
    }
    $document.on('keypress', keyupHandler);
    function keyupHandler(keyEvent) {
        scope.selectCurrent(keyEvent.key-1);
        console.log(scope.current);
    } 
});

Observe how the variable changes its value in the console. I only want to use the keyboard within my app.

Answer №1

This concept may seem straightforward, but it slipped my mind until now. If you are utilizing events that exist outside of Angular's refresh cycle, the changes won't be applied. While this workaround may function as intended, it is not advisable due to the risk of errors occurring if you attempt to apply changes during a digesting cycle. I recommend consulting the documentation to discover proper solutions within the confines of Angular:

app.controller("myCtrl", function($document, $rootScope) {
    let scope=this;
    this.current=0;

    this.isCurrent=function(val){
        return val==this.current;
    }
    this.selectCurrent=function(val){
        this.current=val;
    }
    $document.on('keypress', keyupHandler);
    function keyupHandler(keyEvent) {
        //the apply:
        $rootScope.$apply(scope.selectCurrent(keyEvent.key-1));
        console.log(scope.current);
    } 
});

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

What method can be employed to eliminate choice selection lacking any value?

Currently, I am encountering difficulties in my attempt to remove or hide the first option value from a ransack code. Would you be able to assist me in addressing this concern? Here is the HTML CODE that I am working with: <select id="q_c_0_a_0_name" ...

Real-time Calculation and Validation of Input Field Totals Using JQuery with Modulus % Rules

Hello, I need assistance with validating my input fields to accept values that are divisible by certain numbers. The criteria are as follows: inputValue % 10 == 0; inputValue % 20 == 0; inputValue % 50 == 0; inputValue % 100 == 0; inputValue % 200 == 0; ...

What is the best way to call an Angular component function from a global function, ensuring compatibility with IE11?

Currently, I am facing a challenge while integrating the Mastercard payment gateway api into an Angular-based application. The api requires a callback for success and error handling, which is passed through the data-error and data-success attributes of the ...

Error in Node and Express: Unable to access route

Currently, I am in the process of developing an Express application and running into some obstacles with routing. While my '/' route is functioning perfectly fine, other routes are not working as expected. Despite researching similar questions fr ...

What is the best way to transfer data to a component that is not directly related

I am looking to showcase an image, title, and description for a specific recipe that I select. Here is my setup using ItemSwiper (parent): <template> <Slide v-for="recipe in storeRecipe.data" :key="recipe.rec ...

Is it possible to transition an Angular application from Electron to a browser environment?

I have an existing Electron-based Angular application that was developed by someone else. I am interested in running it in my browser and potentially converting it into a Progressive Web App (PWA). Can this be done, and if so, what is the process? ...

iOS - A clever trick for manually setting focus on an input/textarea

Recently, there have been numerous discussions about the issue in iOS where focusing on an input/textarea element cannot be achieved through manual means. (Check out the threads here and here) It appears that iOS necessitates a genuine tap or click for foc ...

The issue persists as the ng-change directive fails to function despite the presence of ng-model in AngularJS

Greetings everyone. Despite searching online for a solution to my issue, I have been unable to resolve it. Below is the HTML5 code snippet I am working with: <!DOCTYPE html> <html> <head> </head> <body ng-app="myApp ...

Is it possible to define a variable within a JavaScript function and then access it outside of the function?

I have a Node.js application where I need to define a variable inside a function and access its value outside the function as well. Can someone provide guidance on how to achieve this in my code? var readline = require('readline'); var rl = read ...

Issues with setting up gulp and implementing pdf.js

Currently, I am trying to integrate pdf.js library from this source. After downloading and extracting the library, I attempted to install gulp globally as per the instructions on the page. However, when I ran the command: C:\Users\xx\Deskto ...

Begin your meteor project with a remote MongoDB server on a Windows operating system

Currently tackling a project that requires me to integrate my meteor project with a remote MongoDB server on Windows. I successfully set the environment variable (MONGO_URL="DB LINK") from OSX using terminal commands, but I'm encountering difficulties ...

What is the best way to ensure that a JavaScript function is executed continuously for each value in a PHP array?

I am facing a challenge with designing an auction website. My goal is to update the status of specific auctions in a SQL database to 'Closed' once their ending time has passed. However, I'm unsure about how to efficiently run a JavaScript fu ...

Selenium in C#: Timeout issue with SendKeys and Error thrown by JS Executor

Attempting to insert the large amount of data into the "Textarea1" control, I have tried two different methods. The first method successfully inserts the data but occasionally throws a timeout error, while the second method results in a JavaScript error. A ...

Tips for sending data from an HTML form to a server in JSON format

In the vast sea of questions with similar titles, I have not found a solution that works for my specific issue. This is why I am reaching out for help by posting this question. My situation revolves around two scenarios: 1) Defining "action" and "method" ...

How to successfully integrate the three.js example of webgl_loader_obj_mtl.html into an ASP.NET WebForm, even when encountering issues with mtlLoader.setPath

While attempting to integrate the webgl_loader_obj_mtl.html example from three.js into an ASP.NET WebForm, I encountered an issue. Upon running the HTML, Visual Studio 2015 failed at mtlLoader.setPath. Has anyone else experienced the same problem? Addition ...

Encountering a Type Error in React Native when attempting to create a 3D cube with Three.js

Following a tutorial on creating a simple app that displays a 3D cube, I encountered an issue with my code: import React from 'react' import {View} from 'react-native' import Expo from 'expo' import {Scene, Mesh, MeshBasicMate ...

Is it possible for a function to locate the parent element of the anchor that initiated the function call?

My head is spinning just thinking about this question. There's an anchor tag that triggers a function: <a href="#" id="addPerson" onClick="addPerson(); return false;">Add a Guest</a> Here's the actual function being called: functi ...

What is the best way to avoid the @ symbol when retrieving JSON data in AngularJS?

I am currently attempting to retrieve data from a JSON file using Angular. The structure of the JSON is as follows: { "@rid":"#12:0", "@version":2, "@class":"Node", "name":"1", "childs":[ { "@rid":"#11:2", "@version" ...

Access the JavaScript array within a click function by dynamically generating the array name

Here's a scenario where I have an array like this: var first_array = ['foo','bar','foobar']; My goal is to run a click function that retrieves the array's name and iterates through its elements. The array has an ID ...

Can someone recommend a design pattern to implement in React?

I have encountered a challenge while working with over a thousand svg elements. Whenever I try to remove, update, or select a single element, it consumes a significant amount of time. The issue lies in the fact that when I modify or delete a specific svg e ...