Question

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

$范围，控制器，指示， $ scope.function

Answer 1

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

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

**

只需使用jquery或jqLite !!!

**

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

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

打开控制台选项卡，然后在 -

中键入

angular.element($0)

你应该像这样拿回物品

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

现在尝试

angular.element($0).scope()

您将获得范围对象及其所有优点。让我们说它是控制器的范围。然后，您可以直接在浏览器中影响它。在此示例范围中，有userRoles。让我们改变浏览器中的值...

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

说它＆＃34;客人＆＃34;所以让我们把它改成＆＃34;香蕉＆＃34;

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

现在说它的香蕉＆＃39;

这对于查看DOM中的变量值非常有用，但是如果您想要更改某些内容并查看结果，则必须在DOM中操作某些内容以查看更改。例如......

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

如果你从它的加载状态改变变量butter，让我们说它加载为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)

然而它在那里结束并且只返回[]每个新的增量＆gt;超过2美元。如果有人知道这意味着什么请提供一些信息。

当然，您可以使用ID，元素或类来访问DOM中的所有内容，如此...

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

或

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

＆＃34;信息＆＃34>中有更多的方法和功能。上面的链接，比如如何获取控制器名称。检查出来，永远记住......＆＃34;玩得开心。＆＃34;

只需使用jquery或jqLit​​e !!!