Obtenez de l'élément DOM portée par $id

Je comprends que je peux obtenir le champ par élément:

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

Comment puis-je obtenir inverse: Trouver l'élément du DOM à l'aide de la portée $id, comme 003?

J'aimerais le faire à des fins de débogage. Mon champ d'action de l'arbre montre quelque chose et j'aimerais identifier d'où il vient.

  • vous pouvez obtenir le portée par l'obtention de l'id de l'élément <div id="abc"></div>
  • je ne sais pas si vous pouvez faire ce que vous essayez d'atteindre, avez-vous essayé batarang?
  • J'ai vraiment essayé batarang, c'est pourquoi je sais que le mystérieux id d'étendue. Je veux trouver ce que l'élément peut être attaché. Je vous demande le contraire de ce qui est suggéré.
InformationsquelleAutor SimplGy | 2014-04-23
  1. 31

    Bien que ce n'est pas très sexy chaque nœud dom obtient une classe ng-champ d'application de sorte que vous pourriez tech faire quelque chose comme ceci peut-être:

    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;
}
    • Fait le tour. Suppose que je pensais qu'il y aurait une liste des étendues quelque part, mûre pour le récupérer 🙂
    • Je suis avec toi. Je souhaite qu'il y ait de trop car j'ai rencontré un besoin pour cette chose.
    • Si c'est un vrai cas d'utilisation, n'oubliez pas que vous pouvez également analyser à partir de $rootScope. J'ai utilisé des DOM vs rootScope traversée de compter et de toujours obtenir des numéros différents. stackoverflow.com/a/21776522/111243
    • semble que les directives n'ont pas nécessairement .ng-scope -- stackoverflow.com/a/26413528/1037948
    • Je pense que la plupart des gens veulent ce pour quand ils ne sont pas à l'aide d'une directive...vous n'auriez pas besoin de cela, sauf si vous faites quelque chose d'assez avancés.
    • Qu'entendez-vous le $element sur le contrôleur? Puis la passer dans la directive?
    • Ceci est vrai uniquement dans le mode de développement. Vous ne devriez pas utiliser ce qu'il ne fonctionne pas en mode release.

    InformationsquelleAutor btm1
  2. 7

    Essayant de la réponse, j'ai trouvé que les directives ne semblent pas avoir la classe ng-scope, voici donc une version modifiée qui va de secours à tout.

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

    Utilisation:

    var results = getByScopeId('003')
    • remarque: utilisez quelque chose de plus optimisé que le .filter fn, c'est à dire arrêter après le succès du jsfiddle.net/drzaus/3vLwzgkh/3
    • Remarque: la portée() ne fonctionne que lorsque les données de débogage est activé. C'est généralement désactivée lors de la production de la performance
    InformationsquelleAutor drzaus
  3. 2

    La même solution écrite en es2015, sans JQuery dépendance:

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

    Vous pouvez toujours obtenir la portée à l'aide de l'élément de id.

    Exemple:

    html:

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

    js:

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

    Live exemple : http://jsfiddle.net/choroshin/7XQA7/2/

    aussi comme David Chase a suggéré, vous pouvez toujours utiliser batarang - s'Étend Chrome Developer Tools, l'ajout d'outils pour le débogage et le profilage des applications AngularJS.

    • C'est l'inverse. J'ai le portée id et souhaitez l'élément.
    InformationsquelleAutor Alex Choroshin