AngularJS :La communication de la directive au contrôleur avec scope.apply ne fonctionne pas

Question

J'ai un MainController et une directive imbriquée.Je regarde cet exemple pour voir comment fonctionne la communication entre les contrôleurs et la directive, mais la mienne ne semble pas fonctionner.

Fondamentalement, je souhaite appeler une fonction de portée du contrôleur principal à partir d'une directive personnalisée (bouton panier vide).Voir l'exemple plunkr ci-dessous.

Plukr : http://plnkr.co/edit/82STLkKxBK6htTnmnqlu?p=preview

Chaque fois que je fais console.log(scope.$apply("emptyCart()")), ce n'est pas défini pour une raison quelconque.

Note:J'essaie d'éviter autant que possible $rootScope.broadcast...

Answer 1

Vous utilisez la portée isolate pour la directive parent, donc la directive enfant n'a pas accès à la portée du contrôleur.

Afin de fournir à la directive enfant l'accès à cette fonction de portée tout en conservant l'isolement du parent, vous pouvez ajouter cette fonction en tant que scope: { ... } propriété sur la directive parent :

scope: {
  ...
  emptyCart: '='
}

et définissez le nom de la fonction sur l'attribut correspondant dans la déclaration de vue de la directive parent :

<div ... data-show="showPopup" empty-cart="emptyCart"></div>

Ensuite, vous pouvez ignorer toutes les solutions de contournement que vous avez tenté d'utiliser dans votre Plunker et simplement définir un ng-click sur la directive enfant afin de déclencher la fonction du contrôleur :

sHTML = "<button ... ng-click='emptyCart()'>Empty cart</button>";

Démo