在浏览器控制台中访问 Angularjs 元素，如范围或指令

Access Angularjs elements in browser console like scope or directive

本文关键字：范围 指令 元素 Angularjs 浏览器 控制台 访问      更新时间：2023-09-26

如何在浏览器中访问以下 Angularjs 项目？

$scope，控制器命令$scope.功能

信息： https://docs.angularjs.org/api/ng/function/angular.element

注意：如果 jQuery 可用，angular.element 是 jQuery 函数的别名。如果 jQuery 不可用，angular.element 将委托给 Angular 内置的 jQuery 子集，称为"jQuery lite"或"jqLite"。

**

只需使用 jquery 或 jqLite!!

**

如果你不使用jquery，但只有Angularjs不要担心。你已经有一个缩写版本的jquery包含在你的Angularjs文件中。

在浏览器中右键单击 DOM 中的任何项目(在本例中，我使用的是谷歌浏览器版本 39.0.2171.71(64 位((

打开控制台选项卡并在 - 中键入以下内容 - 

angular.element($0)

你应该像这样取回物品

[<my-directive></my-directive>]

现在试试 

angular.element($0).scope()

您将获得范围对象及其所有好东西。假设它是控制器范围。然后，您可以直接在浏览器中影响它。 在此示例作用域中，有用户角色。 让我们更改浏览器中的值...

angular.element($0).scope().userRole

说是"客人"，所以让我们把它改成"香蕉">

angular.element($0).scope().userRole = 'bananas'

现在说是"香蕉">

这对于查看 DOM 中的变量值当然很有用，但是如果您想更改某些内容并查看结果，则必须在 DOM 中操作某些内容才能查看更改。例如。。。

<div ng-show="butter">HELLO</div>

如果您将变量 butter 从加载状态更改为 true，假设它加载为 true 并且在 DOM 中可见，并且您将其更改为 false

angular.element($0).$parent.butter = false

如果不先在 DOM 中操作某些内容，更改在当前 DOM 中将不可见。在此示例中，div 应该消失，但不会消失。 将 ng-show butter 设置为 false 后，我需要单击 DOM 中的某些内容以使 DOM 根据更改的值刷新其状态。

别的。。。

$0 表示您在元素选项卡中突出显示的项目。 如果你这样做...

angular.element($1)

它会返回一些东西以及尝试

angular.element($2)

但是，它到此结束，并且仅返回 []，每个新增量>超过 2 美元。如果有人知道这意味着什么，请提供一些信息。

当然，您可以使用 ID、元素或类访问 DOM 中的所有内容，就像这样......

angular.element('#myDivId')
<div id="myDiv">

或

angular.element('#myDivId p a')
<div id="myDiv">
  <p>hello</p>
    <a href=''...></a>

上面的"信息"链接中有更多方法和功能，例如如何获取控制器名称。检查一下，并永远记住..."玩得开心。">

相关文章：