通过作用域 $id 获取 DOM 元素答案

【问题标题】：Get DOM element by scope $id通过作用域 $id 获取 DOM 元素
【发布时间】：2014-04-23 19:28:42
【问题描述】：

我知道我可以按元素获取范围：

scope = angular.element($0).scope();
scope.$id; // "003"

如何获得反向：使用范围$id，如003，查找DOM元素？

出于调试目的，我想这样做。我的范围树显示了一些东西，我想确定它的来源。

【问题讨论】：

可以通过获取元素的id来获取范围，
我不知道你是否能做到你想要达到的目标，你试过batarang吗？
我确实尝试过batarang，这就是为什么我知道神秘的范围ID。我想找到它可能附加到什么元素。我要求的与建议的相反。

标签： angularjs angularjs-scope

【解决方案1】：

虽然每个 dom 节点都有一个 ng-scope 类并不是很性感，但你可以在技术上做这样的事情：

function getScope(id) {
var elem;
$('.ng-scope').each(function(){
    var s = angular.element(this).scope(),
        sid = s.$id;

    if(sid == id) {
        elem = this;
        return false; // stop looking at the rest
    }
});
return elem;
}

【讨论】：

成功了。猜猜我认为在某个成熟的地方会有一个范围列表可供获取:)
我和你在一起。我希望也有，因为我遇到了对这个东西的需求。
如果是真实的用例，别忘了你也可以从$rootScope爬上来。我使用 DOM 与 rootScope 遍历来计算并总是得到不同的数字。 stackoverflow.com/a/21776522/111243
似乎指令不一定有.ng-scope -- stackoverflow.com/a/26413528/1037948
我认为大多数人在不使用指令时都需要这个......除非你做一些非常高级的事情，否则你不会需要这个。

【解决方案2】：

试用answer，我发现指令似乎没有ng-scope 类，所以这里有一个修改后的版本，可以回退到所有内容。

var getByScopeId = function(id) { 
    var filterfn = function(i,el) {
        var sc = angular.element(el).scope();

        return sc && sc.$id == id;
    };
    // low hanging fruit -- actual scope containers
    var result = $('.ng-scope').filter(filterfn);
    if(result && result.length) return result;

    // try again on everything...ugh
    return $(':not(.ng-scope)').filter(filterfn);
}

用法：

var results = getByScopeId('003')

【讨论】：

注意：应该使用比.filter fn更优化的东西，即成功后停止jsfiddle.net/drzaus/3vLwzgkh/3
注意：scope() 仅在启用调试数据时有效。这通常在生产中关闭以提高性能
它在技术上对我有用，但我不明白结果：n.fn.init 上下文：文档长度：0 prevObject：n.fn.init(2304) [...] [ [原型]]：对象（0）
啊，我明白了。尽管在我输出 {{$id}} 时出现在页面中，但该函数没有找到我正在寻找的 ID（因此 length:0）

【解决方案3】：

es2015写的同样的解决方案，不依赖JQuery：

getElementFromScopeId = (id) => [].slice.call(document.querySelectorAll('.ng-scope')).map((x) => angular.element(x)).filter(x => x.scope().$id == id).pop();

【讨论】：

【解决方案4】：

您始终可以使用元素的 id 获取范围。

示例：

html:

<div id="myId"></div>

js:

  var myEl = angular.element(document.querySelector('#myId'));
  var myScope = angular.element(myEl).scope();

现场示例：http://jsfiddle.net/choroshin/7XQA7/2/

也正如 David Chase 所建议的，您始终可以使用 batarang - 扩展 Chrome 开发人员工具，添加用于调试和分析 AngularJS 应用程序的工具。

【讨论】：

情况正好相反。我有 scope id 并且想要该元素。