angularjs hériter de portée dans les directives

exemple: http://jsfiddle.net/avowkind/PS8UT/

Je veux un imbriquée enfant directive pour obtenir ses données de son emballage parent directive, le cas échéant, sinon de l'extérieur du contrôleur.

<div ng-controller="MyCtrl">
    <parent index="1">
        <child></child>
    </parent>
    <parent index="2">
        <child></child>
    </parent>
     <h1>No Parent</h1>
    <child></child>
</div>
<hr>

De sortie désiré

Parent 1
  Child of parent 1
Parent 2
  Child of parent 2
No Parent
  Child of parent 0

Actuellement mon enfant objet, il ne voit que l'extérieur de la valeur du contrôleur:

De sortie réelle

Parent 1
  Child of parent 0
Parent 2
  Child of parent 0
No Parent
  Child of parent 0

C'est la version simple; en réalité l'extérieur directives obtenir les données à partir d'un serveur qui est mis en forme par les imbriqué enfant pour ce qui est communiqué est un objet complexe n'est pas une simple chaîne de caractères.
En outre, l'enfant est une visualisation qui vont travailler sur différents jeux de données, de sorte que l'extérieur de la mère de la directive n'est pas toujours le même type.

Plus généralement, le modèle que j'essaye de faire ici est d'avoir séparé les directives pour remplir le modèle et la visualisation. de manière plus réaliste l'utilisation serait

<temperature-for city="Auckland">
   <plot/>
   <analysis/>
</temperature-for>

<humidity-for city="Hamilton">
   <plot/>
   <analysis/>
</temperature-for>


<test-data>
   <plot/>
</test-data>

à partir de la documentation: "Qu'est-ce transclude option de faire, exactement? transclude rend le contenu d'une directive à cette option ont accès à la portée à l'extérieur de la directive plutôt qu'à l'intérieur." essayez d'utiliser ?^ dans le require option.

OriginalL'auteur avowkind | 2014-04-01

angularjs

3

Une approche différente qui j'ai personnellement eu beaucoup de succès en est de définir l'intrigue et de l'analyse des directives isoler étendues, et puis les deux sens de lier l'entrée requise.

De cette façon, la directive sont complètement autonome composants, avec un explicite, interface définie. Personnellement, j'ai fait un tracé directive comme ceci:
```
<plot data="countries['Auckland'].plot.data" options="countries['Auckland'].plot.options" legend="external" zoom="xy"></plot>

Scope would look like:
scope: {
    data: '=',
    options: '=',
    zoom: '@?',  //'?' indicates optional
    legend: '@?',
}
```
De cette façon, il n'y a pas de confusion quelles sont les données nécessaires pour cette composante de travailler, et vous pouvez écrire de la documentation à l'intérieur de la directive pour l'entrée souhaitée attributs.

Dans l'ensemble, c'est un modèle qui fonctionne très bien pour une grande partie des cas d'utilisation dans AngularJS, c'est à dire à chaque fois qu'il y a un cas pour la réutilisabilité.

Edit:
Voulais juste ajouter que: en Regardant votre code HTML, il n'y a absolument aucune indication à ce que ces directives d'utilisation, ils peuvent compter sur quoi que ce soit (par exemple, font-ils obtenir toutes les données à partir d'un service? ou ils ne dépendent d'un parent? Si oui, de quelle ampleur?)

C'est l'approche que j'ai adoptée. Bien qu'il ne répond pas à mon original spec j'accepte la valeur du placement du modèle partagé dans la mère commune d'espace et avoir à la fois les directives qu'on lui dise quoi de données à utiliser. J'ai fait à l'aide de la nidification pour éviter de mettre le modèle dans la base de la portée et ayant pour nom deux fois dans les attributs de l'élément. Ce modèle est de plus en plus des entrées et des sorties dans des endroits différents sur la page, sauf que l'entrée est un champ caché qui obtient juste des données.

OriginalL'auteur SveinT
2

Il ya un couple de façons de le faire, mais en supposant que vous voulez vraiment utiliser les étendues parents voici une solution pour aller avec votre violon.
```
var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.index = 0;
}

myApp.directive('parent', function () {
  return {
    transclude: true,
    scope: {
      index: '='
    },
    restrict: 'EA',
    template: '<h2>Parent {{ index }}</h2>',
    compile: function(tE, tA, transcludeFn) {
      return function (scope, elem, attrs) {
        elem.append(transcludeFn(scope)[1]);
      };
    }
  }
});

myApp.directive('child', function () {
  return {
    restrict: 'EA',
    scope: false,
    template: '<p>Child of parent {{ index }}</p>'
  }
});
```
Vous pouvez voir une fourche de votre violon ici.

L'idée est qu'en se débarrassant de la ngTranscludeDirective et la création manuelle de la transclusion, vous pouvez lier la transclusion avec le champ d'application de votre choix. Ensuite, vous pouvez ajouter le résultat à l'endroit où vous le souhaitez dans l'élément résultant de votre directive de compilation.

L'autre point principal est de s'assurer que l'enfant directive ne crée pas de champ d'application (à tous, que ce soit un isolat portée, transcluded portée, ou nouvelles).

Je pense que cela va vous donner les résultats que vous demandez.

REMARQUE: l'Étude de votre étendues bien, parce que peaufiner ces comportements peuvent avoir des résultats inattendus.

Par exemple, si vous ajoutez une fonction de liaison à l'enfant de la directive et qu'il définit indice 5:
```
link: function(scope) {
  scope.index = 5;
}
```
cela n'affectera pas scope.items pour les enfants imbriquée dans le parent. Cependant, il AURA une incidence sur l'externe parent (dans ce cas MyCtrl du champ d'application). Aucune directive n'est pas à l'intérieur d'un parent directive n'aura de cesse de modifier la MyCtrl index.

Toutefois, si vous ajoutez une nouvelle propriété à la portée de l'enfant en fonction de lien:
```
link: function(scope) {
  scope.somethingElse = foo;
}
```
scope.somethingElse sera disponible sur la portée parent si imbriquée dans un parent directive ou pas.

Cette réponse est correcte, car il montre exactement comment obtenir la demande de modèle. Cependant, je suis réticent à manipuler les transclude portée directement grâce à la possibilité d'effets secondaires.
Merci, et je comprends parfaitement @avowkind. De nombreuses fois de ne pas la création d'un enfant dans une situation donnée, peuvent causer le plus grand des maux de tête aussi.

OriginalL'auteur Stephen J Barker
0

Vous aurez besoin de transclude et la finesse de grain en fonction de vos parents directive champ d'application, vous ne pouvez pas le faire à l'aide de la ng-transclude directive: http://jsfiddle.net/PS8UT/2/
```
var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.index = 0;
}

myApp.directive('parent', function ($compile) {
    return {
        scope: {
            index: '@'
        },
        restrict: 'EA',
        transclude: true,
        template: '<h2>Parent {{ index }}</h2>',
        link: function (scope, elem, attrs, ctrl, transclude) {
            transclude(scope, function(clone, s){
                elem.append($compile(clone)(s)); //basically you need to reassign the inner child scope to your current isolated scope
            });
        }
    }
});

myApp.directive('child', function () {
    return {
        //scope: true, //no need to create another scope since you want to use the parent
        //scope: { }, //no index printed
        restrict: 'EA',
        template: '<p>Child of parent {{ index }}</p>'
    }
});
```
Habituellement, lorsque vous traitez avec des modèles et des transclusion, nécessitant de la part de l'héritage parent, est une douleur. ng-transclude de ne pas utiliser votre parent immédiat de la portée en tant que parent, il est habituellement utiliser votre contrôleur de portée. Il est indiqué dans angulaire docs $compiler docs:

transclude
compiler le contenu de l'élément et de le rendre disponible à l'
la directive. Généralement utilisé avec ngTransclude. L'avantage de
transclusion est que la fonction de liaison reçoit une transclusion
fonction de pré-lié à la bonne portée. Dans une configuration typique
le widget crée un isolat portée, mais la transclusion est pas un
enfant, mais un frère ou une sœur de l'isoler de la portée. Cela rend possible pour
le widget pour l'avoir privé de l'état, et la transclusion d'être lié à
le parent (pré-isolé) portée.

OriginalL'auteur pocesar

Vous devez vous connecter pour publier un commentaire.