Найти элемент по innerHTML для вызова углового ng-клика из введенного JavaScript

Question

Я пытаюсь позвонить ng-click из определенного a-тега на веб-странице из внедренного скрипта.

Как я могу найти точный a-тег со своей страницы?Я знаю, если бы у меня было имя класса, которое я мог бы написать ($ ('a.classname')) , но есть ли способ найти тег, который содержит innerHTML Apple ?

Если нет, можно ли вызвать ng-click, так как это 10-й тег a на странице?Как тег [10]?

на странице:

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

Внедренный скрипт:

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

Answer 1

Если вы пытаетесь сделать это извне, например, в расширении или из консоли, вы можете просто вызвать событие щелчка на целевом элементе.

Вы можете использовать eq() для нацеливания на индекс <a> или использовать селектор :contains или для более детальной проверки текста используйте 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>

Answer 2

Что касается моего комментария о xpath в ответе charlietfl, то я подумала, что поделюсь примером, на который я ссылаюсь.

// 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>