Qu'est-ce qu'il y a dans la portée, et attrs les variables/objets?

Question

Qu'est-ce qui est défini dans scope et attrs variable là-bas? Comment voir ce qu'il y a?

De même, comment utiliser la variable scope pour écrire dans les champs ID et scopeID?

De même, pourquoi alert(scope.$id); continue de pointer sur 001? Je n'ai pas 2 applications? Au moins 2 entités distinctes?

<script> 
     var firstApp = angular.module('firstApp', []); 
     firstApp.directive('myFirstApp', function() { 
      var variable = function(scope, element, attrs) { 

       alert(scope.$id); 
       $.each(elemArray, function(scope) { 
        $(this).on('click', function(scope) { 
         var id = $(this).attr("id"); 
         scope.ID = $(this).attr("id");; // how to write to ID field here 
         alert($(this).attr("id");); 
        }); 
       }); 
      }; 
      return { 
       restrict: 'AEC', 
       link: variable 
      }; 
     }); 
    </script> 

    <my-first-app> 
     <button id="a1">button 1</button> 
     <button id="a2">button 2</button> 
     <br />My ID: {{ ID }} 
     <br />My Scope ID: {{ scopeID }} 
    </my-first-app> 
    <br /> 
    <my-first-app> 
     <button id="b1">button 1</button> 
     <button id="b2">button 2</button> 
     <br />My ID: {{ ID }} 
     <br />My Scope ID: {{ scopeID }} 
    </my-first-app> 

Answer 1

Demo Plunker

Si vous voulez voir ce qui est sur la « portée » de votre directive, vous pouvez utiliser angular.extend pour copie superficielle des propriétés du champ d'application à un autre objet, et lier ensuite l'objet à votre vue :

directive

app.directive('myFirstApp', function() { 
    return { 
     restrict: 'AEC', 
     link:function(scope, element, attr) { 
     var inScope = {}; 
     angular.extend(inScope, scope); 
     scope.inScope = inScope; 
     scope.inAttr = attr; 
     } 
    } 
    }) 

HTML

<div my-first-app> 
    {{inScope }} 
    {{inAttr}} 
</div>