Pourquoi mes directives AngularJS partagent-elles la portée?

J'ai essayé de faire une simple directive, qui affiche un nom et permet de le modifier. Quand j'ai mis plusieurs directive sur le nom de la page, ils semblent tous partager le nom de l'attribut. Ce que je fais mal?

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset=utf-8 />
<title></title>

  <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
  <script src="http://code.angularjs.org/1.2.0-rc.3/angular-resource.min.js"></script>
  <script src="http://code.angularjs.org/1.2.0-rc.3/angular-animate.min.js"></script>
  <script>
    var app = angular.module('app', []);

    app.directive('person', function () {

    function link ($scope, elem, attrs, ctrl) {     

        $scope.name = "OLD"        

        $scope.setName = function() {
            $scope.name = 'NEW';
        }
    }

    return {
      restrict: 'E',
      replace: true,
      template: "<span>Current name = {{name}}<a href='' class='btn' ng-click='setName()'>Change name</a><br></span>",
      link : link,
    }

  });

  app.controller('MainCtrl', function ($scope) { });

  </script>    

</head>

<body ng-controller='MainCtrl'>
  <person></person><br>
  <person></person><br>
  <person></person><br>
  <person></person><br>
</body>

</html>

source d'informationauteur nickponline

  1. 32

    Comme mentionné dans la réponse à la question précédente, le comportement par défaut de directives AngularJS est de partager la portée qu'ils sont inclus dans. Ce comportement est modifié par le scope paramètre dans la définition de la directive de l'objet.

    Vous pouvez consulter la documentation de la portée de l'argument dans cette section du AngularJS documents: http://docs.angularjs.org/api/ng.$compile#description_comprehensive-directive-api_directive-definition-object

    Cet argument a trois options:

    1. scope: false - le comportement par défaut de partager le champ d'application de la directive est inclus dans

    2. scope: true - créer un nouveau champ d'application de la directive, qui agit comme les autres enfants et des étendues de fait hérite de son parent

    3. scope: {} - créer un isolé étendue qui ne fait hériter de son parent

    Comme vous pouvez le voir avec la JSBin exemples, les deux options 2 et 3 ne fonctionnent pas pour votre exemple. La différence est de savoir si vous voulez que votre nouvelle étendues isolé ou non.

    La section directives de la AngularJS guide a un bon article sur pourquoi isolé portée peut aider à créer la meilleure de modules réutilisables avec les directives: AngularJS Guide: l'isolation du Champ d'application de la Directive

  2. 3

    Par défaut si vous n'avez pas d'isoler le champ d'application d'une directive, vous ferez part de "l'extérieur" étendue à toutes les instances de votre personne directive. Avec votre application, vous aurez besoin de créer un contrôleur différent à chaque fois, c'est la ré-utilisation d'une telle directive.

    MAIS il existe une solution à ce défaut, et il s appelle isoler portée. Pour ce faire, vous pouvez utiliser une directive de la portée de l'option comme :

    return {
  restrict: 'E',
  replace: true,
  scope : {}, //this is where the magic happens
  template: "<span>Current name = {{name}}<a href='' class='btn' ng-click='setName()'>Change name</a><br></span>",
  link : link,
}

    Vous avez un exemple complet et explenation sur ici section Isoler le Champ d'application de la Directive

  3. 2

    Par défaut, directives partagent le même champ d'application. Mais si nécessaire, vous pouvez utiliser isolé portée pour vos directives: utilisez scope: {} en tant que champ dans votre définition de la directive.

    app.directive('person', function () {

    function link ($scope, elem, attrs, ctrl) {     

        $scope.name = "OLD"        

        $scope.setName = function() {
            $scope.name = 'NEW';
        }
    }

    return {
      restrict: 'E',
      scope: {}
      replace: true,
      template: "<span>Current name = {{name}}<a href='' class='btn' ng-click='setName()'>Change name</a><br></span>",
      link : link,
    }

  });
  4. 1

    Vous avez 3 options pour scope dans AngularJS directives

    1. false (Utilise parent)
    2. true (crée propre champ d'application et hérite également du parent, je.e vous pouvez accéder à des éléments définis dans le parent de la portée de l')
    3. {} (crée un isolé portée)

    Pourquoi mes directives AngularJS partagent-elles la portée?

    Permettez-moi de le démontrer à l'aide de $rootScope 

        app.run(function($rootScope){
      $rootScope.firstname = "Root scope name";
      $rootScope.rootValue = "Root value";
    });

    app.directive("sampleDirective",function(){
      return{
        template:"<div>{{firstname}}{{rootValue}}</div>",
 //here rootValue will be accessible as its inherited from parent. You can overwrite this as well
        scope : true,
        controller:['$scope',sampleDirectiveScope]
      };
    });

    function sampleDirectiveScope($scope){
      $scope.firstname = "child scope changing name - ";
    };

    app.directive("isolatedScopeDirective",function(){
      return {
        controller:isolatedFunction,
        template:" this has isolated scope ,<div>{{rootValue}}</div>", 
    //here rootValue will not be accessible because it is isolated and not inheriting from parent
        scope: {}
      };
    });

    function isolatedFunction($scope){ 
      //define values for this scope
    };

    Cochez cette démonstration en direct