Find element by innerHTML to call angular ng-click from injected javascript

Question

I am trying to call ng-click from a specific a-tag on the webpage from an injected script.

How could I find the exact a-tag from my page? I know if I had a class-name that I could write ($('a.classname')), but is there a way to find the tag which contains innerHTML Apple?

If not, would it be possible to call ng-click, as it is the 10th a-tag on the page? As a[10]?

Tag on page:

    <a ng-click="myFunction()">Apple</a>

Injected script:

    angular.element($('a')).scope().$apply(function() {
    angular.element($('a')).scope().myFunction();
    });

Please explain from an injected script. You may have too use $compile on the html element you receive. — anotherdev
– anotherdev, Commented Mar 28, 2019 at 11:20
I am not really sure if I understand your question fully. You mean you want to call the click event of specific anchor tag? .To find the anchor tag with specific text, you can grab all anchor tags and then iterate over it and check if it's textContent includes the word apple. — random
– random, Commented Mar 28, 2019 at 11:28
Seems overcomplicated , try just triggering a click on the element ... $('a').eq(9)[0].click(). If you want the scope it is assigned to the dom element, not a jQuery object. — charlietfl
– charlietfl, Commented Mar 28, 2019 at 11:30

charlietfl · Accepted Answer · 2019-03-28 12:14:18Z

2

If you are trying to do this externally, such as in an extension or from console, you could just trigger click event on the targeted element.

You could use eq() to target the index of <a> or use :contains selector or for more granularity of testing the text use filter()

angular
  .module('app', [])
  .controller('MainCtrl', ($scope) => {
    $scope.myFunc = (val) => {
      console.log('Clicked value = ', val)
    };
  });

// from outside angular app
setTimeout(() => {
  // by index
  $('a').eq(3).click()
  // or by text contains
  $('a:contains(Apple)').click();
  // using filter()
  $('a').filter(function() {
    return this.textContent.trim() === 'Apple';
  }).click();

}, 500)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>

<div ng-app="app" ng-controller="MainCtrl">
  <a href ng-click="myFunc(1)">1</a>
  <a href ng-click="myFunc(2)">2</a>
  <a href ng-click="myFunc(3)">3</a>
  <a href ng-click="myFunc(4)">Apple</a>
</div>

edited Mar 28, 2019 at 12:14

answered Mar 28, 2019 at 11:48

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Berg Over a year ago

And you are correct, I'm working on an extension for Safari, and before I could run my other script I would first need to trigger a specific function in a tag. Unfortunately I had overlooked that there were other a tags with the same innerHTML and function on other places of the page, but I think this could be possible using xpath as well? So I will give that a try also. But many thanks again for the answer, I surely did overcomplicate things it seems. Never worked with a site that used angular before, made my head spin for a bit. :)

Joe Berg · Accepted Answer · 2019-03-31 18:21:54Z

In regards to my comment about xpath in answer by charlietfl, thought I would also share the example I was referring to.

// by specific anchor tag from full xpath

var nodesSnapshot = document.evaluate("//html/body/div[1]/a[1]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
{
nodesSnapshot.snapshotItem(i).click();
nodesSnapshot.snapshotItem(i).style.background = 'yellow';
console.log('Clicked first <' + nodesSnapshot.snapshotItem(i).tagName + '> tag and marked it yellow')
}

// or by specific anchor tag from xpath by index that contains the text

var nodesSnapshot = document.evaluate("//a[3][text()[contains(., 'Apple')]]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
{
nodesSnapshot.snapshotItem(i).click();
nodesSnapshot.snapshotItem(i).style.background = 'pink';
console.log('Clicked third <' + nodesSnapshot.snapshotItem(i).tagName + '> tag that contains ' + nodesSnapshot.snapshotItem(i).text + ' and marked it pink')
}

<div ng-app="app" ng-controller="MainCtrl">
  <text>1: </text><a ng-click="myFunction()">Apple</a>
  <text>2: </text><a ng-click="myFunction()">Apple</a>
  <text>3: </text><a ng-click="myFunction()">Apple</a>
</div>

Collectives™ on Stack Overflow

Find element by innerHTML to call angular ng-click from injected javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related