使用 angular.element 通过 $ID 获取范围对象答案

【问题标题】：Use angular.element to get scope object by $ID使用 angular.element 通过 $ID 获取范围对象
【发布时间】：2015-12-13 04:14:19
【问题描述】：

我需要将数据从 Angular 应用程序传递到在 Angular 之外运行的脚本，因为我无权编辑 Angular 应用程序的代码。

使用 Chrome 的 Angular Batarang 和 NG-Inspector 扩展，我可以看到我需要从中提取的 JSON 对象，但我不知道如何开始。

例如，在 Angular Batarang 中，对象看起来像：

$id=5
name: "listing"
keys:
   0: "alpha"
   1: "beta"
alpha:
   user: "test"
   userID: "12345"
beta: 
   address: "555 Elm St"
   phone: 555.555.5555

我最初的想法是我可以使用angular.element 抓住它，但我没有任何成功。

【问题讨论】：

标签： javascript html angularjs angularjs-scope

【解决方案1】：

您可以通过angular.element 确定该范围绑定到哪个元素，选择该元素并获取它的范围。假设这个作用域被附加到元素<div id="stuff"></div>，观察下面的例子，具体来说就是对.scope()的调用

<div ng-app="app" ng-controller="ctrl" id="stuff"></div>

<button onclick="getStuff()">get stuff</button>

var app = angular.module('app', []).controller('ctrl', function($scope) {
   $scope.inside = { 'name': 'guy', 'idk': 'blah' }
});

var getStuff = function() {
    var outside = angular.element(document.getElementById('stuff')).scope();
    console.log(outside.inside) // retrieved "outside" of AngularJS
}

JSFiddle Example - 演示

更新

根据docs，必须启用调试模式。

scope() - 检索当前元素或其父元素的范围。需要启用调试数据。

默认启用，disabling it 会在此处引起问题

【讨论】：

你太棒了。那工作得很好......我的问题是有自定义元素，所以我没有 getElementById，而是去 querySelectorAll 并找到了具有我正在寻找的范围对象的元素。感谢您的帮助！
我相信 scope() 方法在生产模式下运行 Angular 时不起作用。这是一个陷阱，因为它运行良好，直到它被部署。
@djabraham 生产模式？你能解释一下你的意思吗？
我不会让应用程序依赖于 scope()，因为当调试数据被禁用时它就不存在了。您可以在已部署的应用程序上实时启用调试数据，以调试问题。但默认情况下保持调试数据会影响性能，因此通常在未启用此功能的情况下部署应用程序。 docs.angularjs.org/guide/production
我没有看到任何关于 .scope() 不起作用的信息。如果有的话，它会提醒您它确实工作 > 然后可以通过 element.scope() 访问这些范围引用