javascript - 通过innerHTML查找元素以从注入的javascript调用角度ng-click

Question

我正在尝试从注入脚本的网页上的特定 a-tag调用ng-click 。

如何从我的页面中找到确切的 a-tag？我知道我是否有一个可以写的类名($('a.classname'))，但是有没有办法找到包含 innerHTML Apple的标签？

如果没有，是否可以调用 ng-click，因为它是页面上的第 10 个 a-tag？作为[10]？

页面标签：

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

注入脚本：

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

标签： javascriptangularjs

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>