Comment Changer les Variables en Dehors d'une Directive

Si vous utilisez les directives AngularJs, vous devrez probablement changer toute variable à l'intérieur. Les méthodes sont différentes selon le type de portée. Comme vous le savez, il y a 3 types de portée: not inherit (pas hérité), inherit (hérité), isolated (isolé).

Voyons comment on peut changer la variable pour chaque type de portée (scope).

1. scope: false (not inherit)

Si vous utilisez directive sans taper scope ou typer scope à false, cela signifie que votre directive n'héritera pas de la portée, ne l'isolera pas. Votre directive fonctionnera sur votre portée actuelle, c'est pourquoi vous n'aurez aucun problème à modifier une variable dans votre directive. Vous pouvez modifier la variable de votre choix dans votre contrôleur / directive sur la portée actuelle.

2. scope: true (inherit)

Dans votre directive scope: true (vrai) signifie, que votre directive heritera une forme de portée (scope form) de son parant. Ce n'est pas la portée (parent) actuelle et ce n'est pas une portée isolée. Angular créera une nouvelle portée, qui est l’enfant de la portée actuelle et existe dans la portée actuelle en tant qu’enfant.

Si vous essayez d'extraire la portée parent, vous en verrez l'architecture. Dans la portée parent, vous verrez le champ appelé $$childHead, qui en est la première portée enfant et le champ $$childTail, qui est la dernier enfant de votre portée.

Si vous avez plusieurs directives, l'intérieur angulaire de la portée parent créera toutes les portées enfants avec l'architecture suivante: dans votre première portée enfant, vous verrez quelque chose comme $$nextSibling, qui est la prochaine de l'étendue.

Comme vous comprenez, vous pouvez utiliser le premier champ d’application, modifier sa variable et passer à la prochaine étape et modifier sa variable aussi.

La portée parent est quelque chose comme cela :

$$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"

Essayez-vous-même!

<!DOCTYPE html>
<html>
  <head>
    <title>fr.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>

Essayez-vous-même!

Dans le cas d’un champ d’application isolé, le champ d’application de la directive ignore complètement le champ d’application de son parent.