triggering ng-click event from an outside script

I have been working on developing a chrome extension to automate form filling. The particular form I am dealing with has a next button with an ng-click attribute set to "forward()" like so-

<button type="button" ng-class="{disabled: !showNext()}" ng-click="forward()" class="btn btn-success btn-lg default pull-right" style="font-size: 18px;">Next <i class="fa fa-chevron-right white-color"></i></button>

I attempted to call 

angular.element($('button.pull-right')).scope().forward()
or 
$('button.pull-right').scope().forward()
, and while the function runs, the view does not update. I am aware that using $('button.pull-right').click() works, but I specifically need to bypass the click event. In order to achieve this, I aim to bind the click to a script function external to the page (which will be injected by my extension) and then trigger the forward() function from within my script.

I spent a significant amount of time searching for solutions online without success. Requesting assistance!

javascriptangularjs

Answer №1

When interacting with Angular from an external source, it may not recognize the changes unless you explicitly notify it. This can be achieved by using $apply.

Give this a try:

angular.element($('button.pull-right')).scope().$apply(function() {
    angular.element($('button.pull-right')).scope().forward();
});

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

including identical item in the array

<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <script> var app = angul ...

javascriptangularjs

Navbar toggle button in Bootstrap 4 does not function properly when placed within a button group

When the navbar is collapsed, I need two buttons to remain visible along with the toggle button. However, I don't want these buttons to collapse with the menu items. To address this issue, I placed the buttons inside a button group with the toggle but ...

javascripthtmljquerycssbootstrap-4

Dealing with Array Splicing Issues in Angular

Being fairly new to the world of AngularJS, I suspect that I am just making a simple mistake. My goal is to splice the cardTypes array at the var newCard = cardTypes.shift(); line rather than using .shift() so that I can consider my ng-repeat index. Whil ...

javascriptarraysangularjsionic-framework

Strategies for retaining additional fields added via JavaScript when the page is refreshed

var newField = document.createElement("lastExp"); newField.innerHTML = 'insert new form field HTML code here'; document.getElementById("lastExp").appendChild(newField); I have a button that adds an additional form field with a simple click. ...

javascript

Turn off the scrolling bars and only allow scrolling using the mouse wheel or touch scrolling

Is there a way to only enable scrolling through a webpage using the mouse wheel or touch scrolling on mobile devices, while disabling browser scroll bars? This would allow users to navigate up and down through div elements. Here is the concept: HTML: &l ...

javascriptjqueryhtml

Managing null values in Typescript when they are greater than or equal to zero

I need to perform a simple check to see if a given variable is greater than or equal to 0. public print(value: any): void { if(value >= 0) { console.log('Greater than zero') } } The issue arises when the incoming variable has ...

javascripttypescriptlogical-operators

Using query strings to manipulate the URL of an iframe and add additional information

I am facing a challenge with integrating my legacy perl application into an MVC application. I have set up a structure where the legacy application is loaded into an iframe within default.aspx, but I need to capture the URL of each page within the iframe a ...

javascripthtmlasp.net-mvcperliframe

NextJs application displaying empty homepage and preventing redirection

After successfully deploying my nextjs app on netlify, I encountered a strange issue. When I visit the base url of my website, instead of seeing the homepage, all I get is a blank screen. Oddly enough, if I navigate to specific pages on my site, they load ...

javascriptreactjsnext.jshostingweb-hosting

Updating a column in a SQL Table via an Ajax request

I am attempting to store the on or off value from a form into an SQL database by calling a JS function with an AJAX request that sends it to a PHP page for processing. I seem to be facing some issues with my code and could really use some assistance as the ...

javascriptjqueryhtmlsqlajax

Traverse through an array of elements within a React component

I will be receiving data from an API and storing it in a state object that appears like the following: constructor(props) { super(props); this.state = { searchable: false, selectValue: 'day-to-day-banking', clearable: false, data: { ...

javascriptarraysreactjs

Hey there, I'm looking to automatically delete new users from my mongoDB atlas database if they haven't verified their phone number within 2 minutes. I believe using the TTL feature would be

Database Schema In my User schema, the field isVerified is initially saved as false. The user enters their phone number, receives a verification token via SMS, and both the token and number are saved in the database. Once the user enters the verification ...

javascriptnode.jsreactjsmongodb

I'm having trouble with using setInterval() or the increment operator (i+=) while drawing on a canvas in Javascript. Can anyone help me out? I'm new

I am looking to create an animation where a square's stroke is drawn starting from the clicked position on a canvas. Currently, I am facing an issue where the values of variables p & q are not updating as expected when drawing the square at the click ...

javascripthtmlcanvassetintervalincrement

What is the best method for saving data from a reactive form to local storage?

I'm looking for a way to store reactive forms data in local storage and then access that data on another page. <form [formGroup]="testform" > firstname: <input type="text" formControlName="fname"><br> lastname: ...

javascripttypescriptangular7

How can the "dragenter" event be allowed to pass through child elements?

https://jsfiddle.net/7scfk81L/ The structure of my document is as follows: <div id="container"> <div id="inner"></div> </div> I have added listeners for dragEnter and dragLeave to the container element. However, when I drag in ...

javascripthtmlcss

Sending a parameter to a function using ng-init

I am trying to display repeated data within a div element, with another iteration within that div using the id value from the first iteration. I am attempting to pass this value using a function in ng-init, but I am encountering an error. <div ...

javascripthtmlangularjs

Split total based on checkboxes toggled with JavaScript

I'm facing a challenge. I have a total sum of donations collected, for example, 10€. Additionally, there are various NGOs that one can select to donate to. Individuals have the option to toggle on/off which NGO's they wish to contribute toward ...

javascripthtmlcheckboxtoggle

Is recursion effective in this scenario? (javascript/node.js)

Currently, I am working on creating a TV using a Raspberry Pi and JavaScript to play the same playlist repeatedly. Although playing the files is not an issue, I am facing a challenge with the asynchronous nature of JavaScript. Below is the code that is cau ...

javascriptnode.jsraspberry-piraspbian

I am able to access the JSON file from the URL without any issues, but for some reason, I am unable to fetch it using $

(function(){ $(document).ready(function(){ $.getJSON('http://dev.markitondemand.com/MODApis/Api/v2/Quote/json?symbol=AAPL&callback=?', function(){console.log("function was run");}); }); }()) I recently delved into working with APIs. Ho ...

javascriptjsonajaxxml

What steps do I need to take to activate CSS Modules in React version 16.13.1?

Hello everyone! I'm currently delving into tutorials and articles on how to activate CSS Modules in React 16.13.1. It's clear that the first step is to run "npm run eject", which I've already completed. The next step involves modifying the " ...

javascriptcssreactjswebpackreact-css-modules

Can Electron-builder be packaged using npm instead of yarn?

I have recently developed a Python3 application using the Electron framework, which is built on top of Node.js. To set up dependencies and launch the app, I installed them using npm and run it with npm start. After referring to the Electron documentatio ...

javascriptpython-3.xnpmelectronelectron-builder