检查页面中javascript函数的可用性

Question

我想要的非常简单，我希望在我打开this pluralsight course page时自动点击展开全部按钮。它的HTML是：

<a id="expandAll"
   ng-click="expandAllModules()"
   ng-hide="allModulesExpanded()">
    Expand All
</a>

所以看起来很容易，我们只需要调用函数expandAllModules()。但是，当我检查其类型时，我不知道为什么它会给我undefined：

typeof expandAllModules
=> "undefined"

一般来说，一个函数的类型应该给我这样的“函数”：

function a(){}
=> undefined
typeof a
=> "function"

由于函数expandAllModules()不可用，我无法调用它。任何人都可以帮我解决这个问题吗？

---

修改

也许我需要详细说明我的问题。我不是那个页面的作者。我只想制作一个简单的greasemonkey或tempermonkey脚本，并在我进入页面时自动展开模块。

Answer 1

问题

仅调用expandAllModules()的原因不起作用是因为此函数属于Angular的一个范围，并且不是分配给window的方法。此功能在Plural Sight table-of-contents-controller-v9.js中定义如下：

"use strict";

pluralsightModule
    .controller("TableOfContentsController", ['$scope', ..., function ($scope, ...) {
        ...

        $scope.expandAllModules = function() {
            _.each($scope.courseModules, function (module) { module.visible= true; });
        };

        ...
    }])

解决方案

为了让我们自己调用这个函数，我们必须经历这个范围。

  

scope是一个引用应用程序模型的对象。它是表达式的执行上下文。范围按层次结构排列，模仿应用程序的DOM结构。范围可以观察表达和传播事件。
- AngularJS: Developer Guide

范围是触发函数的元素的一部分。我们可以通过将元素的id属性传递到angular.element()，然后在该对象上调用scope()来访问此特定范围：

angular.element('#expandAll').scope()

这将为我们提供以下数据，我们可以在其中看到expandAllModules()函数：

不幸的是，AngularJS并没有让我们简单地执行scope().expandAllModules();相反，我们必须通过它$apply和$eval方法：

var scope = angular.element('#expandAll').scope();

scope.$apply(function() {
    scope.$eval(scope.expandAllModules())
});

我们现在也可以通过调用：

来折叠模块

scope.$apply(function() {
    scope.$eval(scope.collapseAllModules())
});

---

Answer 2

如果我在这里偏离基地，我道歉。您是否正在尝试“链接”到该页面并“强制”页面“全部展开”，或者您是否有权访问该页面，并希望通过插入代码触发页面上某些代码的点击？只是做这样的事情似乎可以从命令行工作。

   jQuery(function(){
      jQuery('#expandAll').trigger('click');
   });

由于我不知道你的需要，我的想法是，这有点简单，而不是你想要的。从其他人的回复中，您似乎想要创建自己的指令来启动点击？

Answer 3

我可能会有一些错别字 - 但这个想法就在那里。

angular.element(document.body).ready(function() {

    var el = angular.element( document.getElementById('expandAll') );

    var scope = el.scope();

    scope.expandAllModules();

    scope.$digest(); <--- might not be needed, but when i check your site, it needs to have this

});

<强>更新

如果只是'onclick'而不是'ng-click'，你不需要获得范围;并直接调用该函数。

<强>更新

我在你的网站上试过这个，你需要有范围。$ digest（）。当我尝试它时，我正在使用开发者控制台。

请参阅下面的开发者控制台

我在你的网站上玩它。