Question

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

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

如何反转：使用范围$id查找DOM元素，例如003？

我想这样做是为了调试目的。我的示波器树显示了一些内容，我想确定它的来源。

Answer 1

虽然它不是很性感，但每个dom节点都有一个类范围，所以你可以通过技术做这样的事情：

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;
}

Answer 2

尝试answer，我发现指令似乎没有类ng-scope，所以这里有一个修改后的版本，它会回退到所有内容。< / p>

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')

Answer 3

在es2015中编写的相同解决方案，没有JQuery依赖：

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

Answer 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应用程序的工具。

按范围$ id获取DOM元素

4 个答案: