Enfant personnalisé directive accéder à portée de parent

Je vais avoir deux des directives sur mesure dans mon application angularJS. Un acte comme un parent et d'autres agissent comme des enfants. Je suis en train d'essayer d'accéder à un parent de la portée de l'enfant à l'intérieur de la directive. Mais je ne suis pas d'obtenir le résultat souhaité.

<div ng-controller="CountryCtrl">
{{myName}}
    <div ng-controller="StateCtrl">
        <state nameofthestate="'Tamilnadu'">
            <city nameofthecity="'Chennai'"></city>
        </state>
    </div>
</div>

et mon script ressemble

var app = angular.module("sampleApp",[]);
app.controller("CountryCtrl",function($scope){
    $scope.myName = "India";
});
app.controller("StateCtrl",function($scope){
});
app.directive("state",function(){return {
    restrict : 'E',
    transclude: true,
    scope : { myName  : '=nameofthestate'},
    template:"**   {{myName}} is inside {{$parent.myName}}<br/><ng-transclude></ng-transclude>"
}});
app.directive("city",function(){return {
    restrict : 'E',
    require:'^state',
    scope : { myName  : '=nameofthecity'},
    template:"****   {{myName}} is inside {{$parent.myName}} which is in {{$parent.$parent.myName }}<br/> "
}});

Correspondant JSFiddle disponible dans https://jsbin.com/nozuri/edit?html,js,sortie

La sortie qui je suis, il est

India
** Tamilnadu is inside India
**** Chennai is inside India which is in Tamilnadu

et la sortie attendue est

India
** Tamilnadu is inside India
**** Chennai is inside Tamilnadu which is in India

Quelqu'un peut-il m'instruire de ce que je fais de mal ici?

désolé , mais votre violon n'est pas de travail pour moi.
salut stackoverflow.com/questions/23437113/... cela peut vous aider, c'est ressembler à ce que vous voulez faire
Vous pouvez personnaliser un transclude avec transclude : 'element'. Le constructeur est disponible dans link : function(scope, element, attrs, Ctlr, transclude){}

InformationsquelleAutor Sriramajeyam Sugumaran | 2015-07-03

28

La ville directive $parent est un transcluded champ d'application de la directive d'état.

La transcluded champ d'application de la directive d'état est héritent de $parent de l'etat, de la directive, qui est contrôleur ainsi, c'est pourquoi $parent.MyName = Inde.

L' $parent de transcluded portée de la directive d'état isolé de la portée ( scope = {} ), c'est pourquoi $parent.$parent.MyName = tamil nadu ( Partie Angulaire 1.3 mise à jour )

Peu de détail de ce qu'il se passe :
Comment accéder à portée parent de l'intérieur personnalisé directive *avec son propre champ d'application* dans AngularJS?

transclude: vrai - la directive crée un nouveau "transcluded" enfant
la portée, ce qui fait hérite de la portée parent. Si l'
la directive crée également un isolat de la portée, de la transcluded et la
isoler les étendues sont frères et sœurs. L' $parent de la propriété de chaque portée
les références de la même portée parent.

Angulaire v1.3 mise à jour: Si la directive crée également un isolat portée,
le transcluded champ d'application est maintenant un enfant de l'isoler de la portée. L'
transcluded et d'isoler les étendues ne sont plus les frères et sœurs. L' $parent
propriété de la transcluded les possibilités de références de l'isoler de la portée.

Aussi Matthieu réponse est bonne pour parent-enfant directive communications.

InformationsquelleAutor kwangsa

Fait ce travail pour vous? Adapté de cette réponse.

Il n'y a pas de moyen simple d'accéder à la transcluded contenu de l'élément parent, de sorte que nous injecter le contrôleur de parent à l'enfant d'accéder à son champ d'application.

  var app = angular.module('myApp', []);

  app.controller("CountryCtrl",function($scope){
      $scope.myName = "India";
  });

  app.controller("StateCtrl",function($scope){
  });

  app.directive("state",function(){return {
      restrict : 'E',
      transclude: true,
      scope : { myName  : '=nameofthestate'},
      template:"**   {{myName}} is inside {{$parent.myName}}<br/><ng-transclude></ng-transclude>",
      controller: function ($scope) {
        this.getName = function () {
          return $scope.myName;
        }
      }
  }});

  app.directive("city",function(){return {
      restrict : 'E',
      require:'^state',
      scope : { myName  : '=nameofthecity'},
      template:"****   {{myName}} is inside {{parentName}} which is in {{$parent.myName }}<br/> ",
      link: function(scope, element, attrs, ctrl) {
        scope.parentName = ctrl.getName();
      }
  }});

oui. Elle fonctionne. Mais je suis accepter @kwan245 de répondre comme il l'explique quelle erreur j'ai fait.. 🙂 Merci Metthew
J'ai utilisé cette méthode, mais dans mon cas, la variable contenant le nom est un tableau qui peut changer. Est-il un moyen de faire face à cette situation que la vue n'est pas mise à jour pour moi dans ce cas? Je sais que je pourrais utiliser les montres, mais voudrait éviter cela autant que possible. J'ai un exemple ici: stackoverflow.com/questions/42676713/...

InformationsquelleAutor Matthew King

2

Quand AngularJS rencontres transclude , il clone le HTML avant de
de le remplacer par le modèle ou templateUrl contenu. Puis, quand il
rencontres ng-transclude , il compile les transcluded contenu, mais
liens à la portée parent au lieu de la partie isolée du champ d'application de la
la directive. Ainsi, la transcluded contenu a toujours accès à l'
contrôleur de parent et de son contenu, alors que la directive HTML dispose d'un
isolé portée (ou un nouveau champ d'application, selon le cas peut être).

AngularJS et en cours d'Exécution

InformationsquelleAutor gr3g

Découvrez solution de mon directive, il travaille avec beaucoup de parrents. Ce que j'ai fait était de supprimer transclude et nécessitent params. Ne pas s'inquiéter sale html, il suffit de regarder js, simple comme f.. 😀

    CRM.directive('inputwv', function ($compile) {
var getTemplate = function(contentType) {
var template = '';
switch(contentType) {
case '3':
template = '<input type="number" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px;width:100px">'
break;
case '0':
template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">'
break;
case '1':
template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">'
break;
case '2':
template = '<textarea class="materialize-textarea teal-text" type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">'
break;
case '4':
template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">'
break;
case '5':
template = '<input type="date" class="datepicker" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px"><script type="text/javascript">$(\'.datepicker\').pickadate({selectMonths: true, selectYears: 15});</script>'
break;
default:
template = '<textarea class="materialize-textarea teal-text" type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">'
}
return template;
}
var linker = function(scope, element, attrs) {
element.html(getTemplate(attrs.typ)).show();
$compile(element.contents())(scope);
}
return {
restrict: "E",
link: linker
};
});

InformationsquelleAutor Paweł Smołka

Vous devez vous connecter pour publier un commentaire.