Manually setting focus to input text in AngularJS: How it's done

I am having difficulty manually setting the focus on an input element using $event.currentTarget.focus();. Despite following the correct syntax, it seems to not be functioning as intended. Below is a snippet of what I am trying to accomplish:

HTML:

<div ng-repeat="item in items track by $index" ng-dblclick="onDblClick($event,item)">
      <input type="text" ng-model="item.id" ng-disabled="!item.editing" ng-blur="onBlur(item)">
    </div>

Script:

$scope.onDblClick = function($event, item) {
      item.editing = true;
      //setting the focus to elemnt but don't know why it's not working
      $event.currentTarget.focus();
    };

To view this issue in action, visit the plunkr.

Answer №1

After some trial and error, I was able to solve the issue on my own. I developed a custom directive called focus that utilized a $watch.

HTML:

<div ng-repeat="item in items track by $index" ng-dblclick="onDblClick($event,item)">
      <input type="text" ng-model="item.id" ng-disabled="!item.editing" ng-blur="onBlur(item)" focus="item.editing">
    </div>

Script:

app.directive('focus', function($timeout) {
    return function(scope, elem, attrs) {
      console.log(attrs)
      scope.$watch(attrs.focus, function(newval) {
        if (newval) {
          $timeout(function() {
            elem[0].focus();
          }, 0, false);
        }
      });
    };
  });

If you're interested, here is the link to the Plunkr for reference.

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

JavaScript is failing to add items to an array

Attempting to add coordinates and user-specified data from a form to an array named "seatsArray". Here's the code snippet: <div> <img onLoad="shiftzoom.add(this,{showcoords:true,relativecoords:true,zoom:100});" id="image" src="plan1.bmp" wid ...

How can I automatically update the preview image on a website shared on Facebook?

I tried the code below, but it doesn't seem to be working. Is it possible to dynamically achieve this? If yes, how can I do it? I initially used the og:image meta tag, but it didn't work due to browsers not reading JavaScript. Any assistance woul ...

Tips for receiving a success notification post form submission on CodeIgniter

I'm currently working on a form using CodeIgniter. Below is the code I have so far: <?php echo form_open_multipart(''); ?> <div class="input-group"> <input maxlength="30" type="text" name="name" placeholder="Name" class ...

How can I display a popup window within an iframe on a separate full page?

I am facing an issue while creating an HTML table using AngularJS with a popup. The problem is that I want the popup window, which shows a graph, to open up on the entire page instead of in a specific div. My desired output should look like this: https://i ...

Modify the class of a div element depending on the value of a data attribute

I am faced with a situation where I have an iframe and two different sets of CSS codes - one for landscape orientation and one for portrait orientation. However, these are not specifically for the device's orientation but rather for the content loaded ...

Using the THIS keyword in JQUERY for functions without an action: a guide

Is there a way to dynamically set the widths of table elements based on their parent's data-attribute value? For example, if a parent has percent="10", I want the child element to have a width of 10%. How can this be accomplished? To illustrate, here ...

Is the Javascript framework malfunctioning even though the code is identical to the one on jsfiddle

<html> <head> <meta charset="UTF-8"> <title>Interactive Globe Display using iTowns</title> <style> html { height: 100%; } body { margin: 0; overflow: hidden; ...

Exploring the world of CouchDB through jQuery and AJAX POST requests while navigating

I am in the process of building a simple web application. Today, I installed Couch 1.3.1 and set up a database. I am currently trying to save a document to my local Couch (localhost:5984) using a POST request from a client browser that is also on localhost ...

What methods can I use to emphasize three distinct dates?

I'm facing difficulty highlighting three specific dates: "10-11-2020", "22-11-2020", and "07-11-2020" using React.js and Datepicker. Unfortunately, my attempts have not been successful so far. Here is the code snippet I am working with: import React, ...

Spinning objects in three.js using tween.js to move around the global axis

Currently, I am working on tween-rotating a 3D cube. Thanks to this helpful post (How to rotate a object on axis world three.js?), I have successfully achieved rotation without any issues. Now, my goal is to transfer the rotation achieved through setFromRo ...

Display information using AngularJS within the Ionic framework

I am attempting to display a variable that is within a for loop. Here is my code where I store the value of $scope.datosTuto[i].Nombre in a variable. When I use an alert to print $scope.NombTuto, I can see the data but I want to display it on my HTML page. ...

Mutex in node.js(javascript) for controlling system-wide resources

Is there a way to implement a System wide mutex in JavaScript that goes beyond the usual mutex concept? I am dealing with multiple instances of a node.js cmd running simultaneously. These instances are accessing the same file for reading and writing, and ...

Having trouble transferring file object from reactjs to nodejs

Hey there! I am relatively new to nodejs and React, and currently, I'm working on a project that involves sending a selected file from the front end (React) to the back end (Node). The goal is to upload the file and convert it into a JSON object. Howe ...

Navigating directly to a page in ReactJS and Redux without needing to login if a token is found in the local storage

Currently in the main component, it is set to automatically redirect to the Login page. However, I want to implement a check to see if a token is already stored in the local storage. If a token exists, I want the application to skip the Login page and dire ...

What is the best location to specify Access-Control-Allow-Origin or Origin in JavaScript?

After researching, I found out that I need to set my Access-Control-Allow-Origin or Origin tags. But the question is: where do I actually add these? The suggestions were to use them in the header section. I couldn't find any detailed explanation on t ...

Tips for updating the background color when clicking in Vue

I've been attempting to change the background color of an element upon clicking it using Vue, but so far I haven't had any success. Here's what I have come up with, including a method that has two functions for the onclick event in Vue. &l ...

PHP query will execute even in the absence of clicking the button

I'm encountering an unusual issue. I've defined a query to insert two names into the database, and I've used Javascript(Jquery) to ensure it only runs when the create button is clicked. However, the script seems to be executing every time I ...

The feature user.presence.status is now operational in discord.js v13

I was trying to get my bot to rename a channel to show the number of users currently online. I wanted to specifically filter out users who are online, idle, or in do-not-disturb mode, as well as offline users. However, the code I wrote doesn't seem to ...

Is Dart the new AngularJS in terms of programming style?

Is there a software library or project available that allows for programming in Dart using an AngularJS style approach? I am interested in creating annotated HTML files to declare my UI rather than instantiating everything imperatively like with SWT. I wo ...

Sequelize - issue with foreign key in create include results in null value

When using the create include method, the foreign key is returning null, while the rest of the data is successfully saved from the passed object. This is my transaction model setup: module.exports = (sequelize, DataTypes) => { const Transaction = ...