按范围$ id获取DOM元素

Sim*_*lGy 29 angularjs angularjs-scope

我明白我可以按元素获得范围:

scope = angular.element($0).scope();
scope.$id; // "003"
Run Code Online (Sandbox Code Playgroud)

如何反转:使用范围查找DOM元素$id,例如003

我想这样做是为了调试目的.我的范围树显示了一些东西,我想确定它来自哪里.

btm*_*tm1 31

虽然每个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;
}
Run Code Online (Sandbox Code Playgroud)

  • 我和你在一起.我希望我也遇到过需要这件事. (2认同)

drz*_*aus 7

尝试答案,我发现指令似乎没有类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);
}
Run Code Online (Sandbox Code Playgroud)

用法:

var results = getByScopeId('003')
Run Code Online (Sandbox Code Playgroud)

  • 注意:scope()仅在启用调试数据时有效.这通常在生产中因性能而关闭 (3认同)

drp*_*zen 5

es2015写的同一个方案,没有JQuery依赖:

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