Comment partager la portée entre deux directives dans AngularJS?

Je veux partager la $scope entre les deux directives suivantes:

One23SRCApp.directive('directive1',function() {
    return {
        restrict: "A",
        scope:true,
        link: function (scope, element, attrs) {
           scope.tablename = "table";
        }
    };
});


One23SRCApp.directive('directive2',function() {
    return {
        restrict: "A",
           link: function (scope, element, attrs) {
           var tablename = scope.tablename;
        }
    };
})

Dans le code HTML, j'ai:

<input type="text" directive2 placeholder="Search Models..."> 

<table directive1>
  <tr>
     <td>column1</td>
     <td>column1</td>
   </tr>
</table>

J'ai créé la directive nommé "directive1 relative" isolé avec de la portée, d'attribuer le nom de "table" à la scope.tablename de la propriété. Je ne suis pas en mesure d'accéder à ce champ d'application de la propriété dans l'autre directive.

Alors, comment puis-je accéder au champ d'application d'une directive dans un autre?

source d'informationauteur Shivkumar

  1. 5

    Vous pouvez faire un $rootScope.$broadcast sur les éléments que vous souhaitez synchroniser à travers la directive.

    Ou vous pouvez passer d'un objet à votre directive1 relative isolé, qui pourrait agir comme un mécanisme de communication. Sur cet objet si vous changez de sous propriété comme tablenamequi aurait une incidence sur la portée parent.

    Quelque chose comme

    One23SRCApp.directive('directive1',function() {
    return {
        restrict: "A",
        scope:{tableconfig:'='},
        link: function (scope, element, attrs) {
           scope.tableconfig.tablename= "table";
        }
    };
});


One23SRCApp.directive('directive2',function() {
    return {
        restrict: "A",
           link: function (scope, element, attrs) {
           var tablename = scope.tableconfig.tablename;
        }
    };
})

    Le code HTML devient

    <table directive1 tableconfig='tableconfig'>
  <tr>
     <td>column1</td>
   <td>column1</td>
   </tr>
</table>

    Votre contrôleur doit avoir cet objet défini

    $scope.tableconfig={};

  2. 19

    AngularJS prend en charge les contrôleurs de la directive, qui sont les contrôleurs qui sont partagés entre plusieurs directives qui exigent le même contrôleur. Cela vous permet d'accéder et de modifier tableConfig dans toute directive qui exige que le contrôleur, sans avoir à déclarer un service distinct ou d'un événement. Pour plus d'informations, consultez "Création de Directives de Communiquer" dans le directives de la documentation.

    C'est de cette façon ngModel et ngForm de travail, par exemple.

  3. 16

    Ma suggestion serait d'utiliser une ressource partagée, par exemple un service. Les Services sont des singletons, il n'y a qu'une seule instance de chaque service, de sorte que vous pouvez utiliser pour partager des données entre des directives, des contrôleurs, des lunettes et même lors du changement de page par le biais de routage.

    Vous définissez le service de ressources comme ceci:

    app.factory("MyResource",function(){
    return {};
});

    Vous pouvez ensuite injecter le service dans vos directives (et les contrôleurs en cas de besoin) et de l'utiliser comme ça.

    One23SRCApp.directive('directive1', ['MyResource', function(MyResource) {
    return {
        restrict: "A",
        scope:true,
        link: function (scope, element, attrs) {
           var resource = MyResource;
           resource.name = 'Foo';
        }
    };
});
One23SRCApp.directive('directive2', ['MyResource', function(MyResource) {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {
           var resource = MyResource;
           console.log(resource.name);
        }
    };
});

    Directive2 du journal " Foo " puisque la ressource est partagée. Bien que assurez-vous que vos directives sont exécutées dans le bon ordre!

    **

    Vous pouvez aussi faire les deux sens de la liaison de données à partir de chaque directive dans la portée parent (voir Chandermani réponse pour ça), mais le dessus est un très utile et puissant pour obtenir des données où vous en avez besoin sans avoir à diffuser ou à suivre exactement où en sont les choses dans le code html.

    Edit:
    Alors que le ci-dessus est très utile en cas de partage des informations entre les contrôleurs et les itinéraires, découvrez stevuu réponse. Il semble préférable de directives (bien que je ne l'ai pas essayé).

  4. 4

    L'échantillon de Chandermani est de travail. Cependant, de cette façon, vous devez attribuer l'attribut sur votre directive et il n'est pas isolé plus. C'est une pollution sur le champ...

    Mon conseil est de partager vos isolé portée par l'utilisation de la manette d'un passage de cette façon.
    Votre maison, votre code! Réfléchissez avant de vous code, mais la plupart de tous... PROFITEZ-en!

    One23SRCApp.directive('directive1',function() {
    return {
         restrict: "A",
         scope: true,
         controller : function($scope){
              $scope.tableconfig= {};
              this.config = function (){ 
                   return $scope.tableconfig;
              }
         },
         link: function (scope, element, attrs) {
             scope.tableconfig.tablename= "table";
         }
    }
});


One23SRCApp.directive('directive2',function() {
     return {
           restrict: "A",
           //^ -- Look for the controller on parent elements, not just on the local scope
           //? -- Don't raise an error if the controller isn't found
           require: "^directive1",
           link: function (scope, element, attrs) {
               var tablename = scope.config().tablename;
           }
    }
});

    Utilisation

    <!-- Notice, no need to share a scope as attribute -->
<div directive1>
    <div directive2>
    </div>
</div>