directive utilisant une autre directive - AngularJS

Question

J'ai deux directives, je veux compter combien fils dans père tag et afficher le compteur dans index.html comme indiqué après les fichiers JS, le problème est que je n'ai pas le numéro correctement

module.directive('directiveFather', function() { 

    return { 

    restrict: 'E', 
    scope: {}, 
    controller: function ($scope) { 

     $scope.AllCounter = 0; 

     this.addCounter = function() { 

      $scope.AllCounter = $scope.AllCounter + 1; 

     } 

    } 


} 

})

module.directive('directiveSon', function() { 

return { 

    restrict: 'E', 
    scope: {}, 
    require: '^directiveFather', 
    link: function(scope, element, attrs, fatherCtrl){ 
     fatherCtrl.addCounter(); 
    } 
    } 


} 

})

<directive father> 

<directive son> 

</directive son> 
{{AllCounter}} 

</directive father> 

Answer 1

Si vous utilisez un champ isolé, puis les éléments à l'intérieur directiveFather sera lié à la portée parente (donc AllCounter ne sera pas directement disponible dans la vue - bien qu'il contienne la valeur correcte).

---

Vous pouvez changer scope: {}-scope: true/false en directiveFather (voir demo 1) ou
« manuellement » compilez, lien et ajoutez le code HTML à l'élément directiveFather (voir demo 2).
(Il est, également, d'utiliser Wildhoney's suggestion et transclusion template.)

_{Fondamentalement, vous n'avez pas besoin de cela pour l'approche du travail - ils ne sont nécessaires pour démontrer que tout fonctionne (en affichant le compteur dans la vue), mais même sans ajouter le compteur, la fonction addChild() est appelée comme prévu.}

---

Cela dit, après avoir fixé les noms d'éléments (<directive-father> et <directive-son>), il fonctionne comme prévu.

---

Voir aussi, ces courtes démos: demo 1, demo 2.