Wie kann man Variablen außerhalb einer Direktive ändern

Wenn Sie AngularJs Direktiven verwenden, müssen Sie wahrscheinlich jede Variable innerhalb der Direktive ändern. Die Möglichkeiten sind je nach dem Typ des Scopes unterschiedlich. Wie Sie schon wissen, gibt es 3 Typen von Scope: not inherit, inherit, isolated.

Lassen Sie uns sehen, wie wir die Variable für jeden Typ von Scope ändern können.

1. Scope: false (nicht vererbt)

Wenn Sie die Direktive verwenden, ohne den Bereich einzugeben oder den Bereich falsch einzugeben, bedeutet das, dass Ihre Direktive den Bereich nicht erbt oder isoliert. Ihre Direktive wird an Ihrem aktuellen Umfang arbeiten, deshalb werden Sie kein Problem damit haben, eine Variable innerhalb Ihrer Direktive zu ändern. Sie können jede beliebige Variable innerhalb Controller/Direktive im aktuellen Bereich ändern.

2. Scope: true (geerbt)

Innerhalb Ihres Direktivenumfangs: true bedeutet, dass Ihre Direktive einen Bereich von ihrem übergeordneten Element erben wird. Es ist nicht der aktuelle (übergeordnete) Bereich und es ist kein isolierter Bereich. Angular erstellt einen neuen Bereich, der das untergeordnete Element des aktuellen Bereichs ist und als untergeordnetes Element im aktuellen Bereich existiert.

Wenn Sie versuchen, den übergeordneten Bereich auszuchecken, sehen Sie die Architektur des Bereichs. In Ihrem übergeordneten Bereich sehen Sie das Feld $$childHead, das der erste untergeordnete Bereich davon ist, und das Feld $$childTail, das der letzte untergeordnete Bereich von Ihnen ist.

Wenn Sie mehrere Direktiven haben, erstellt innerhalb des übergeordneten Bereichs angular alle untergeordneten Bereiche mit der folgenden Architektur: in Ihrem ersten untergeordneten Bereich sehen Sie so etwas wie $$nextSibling, der der nächste des Bereichs ist.

Wie Sie verstehen, können Sie den ersten Bereich nehmen, seine Variable ändern und durch den nächsten Bereich gehen und auch seine Variable ändern.

Der übergeordnete Bereich wird so aussehen:

$$asyncQueue: Array[0]
$$childHead: $get.e.$new.a
   $$asyncQueue: Array[0]
   $$childHead: null
   $$childTail: null
   $$listeners: Object
   $$nextSibling: $get.e.$new.a
   $$prevSibling: null
   $$watchers: null
   $id: "004"
   $parent: $get.e.$new.a
   this: $get.e.$new.a
   __proto__: $get.e.$new.a
$$childTail: $get.e.$new.a
   $$asyncQueue: Array[0]
   $$childHead: null
   $$childTail: null
   $$listeners: Object
   $$nextSibling: null
   $$prevSibling: $get.e.$new.a
   $$watchers: null
   $id: "006"
   $parent: $get.e.$new.a
   this: $get.e.$new.a
   __proto__: $get.e.$new.a
$$listeners: Object
$$nextSibling: null
$$prevSibling: null
$$watchers: null
$id: "003"

Versuch es selber!

<!DOCTYPE html>
<html>
  <head>
    <title>www.w3docs.com</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script>
       angular.module('test',[])
	  .controller('testCtrl',function($scope){
    	     console.log($scope,'ctrl')
	  })
          .directive('myTest',function(){
    	     return {
                restrict: 'EA',
                scope: true,
                compile: function(){
           	    return function(scope){
           	       console.log(scope,'directive');
                    }
        	}
             }
          })
    </script>
  </head>
  <body>
    <div ng-app="test">
      <div ng-controller="testCtrl">
        <div my-test></div>
        <div my-test></div>
        <div my-test></div>
      </div>
    </div>
  </body>
</html>

Versuch es selber!