AngularJS : modification de la portée du parent dans ng-include

Question

J'ai trouvé ce fil de discussion dans lequel la question de la violon original où un ng-include d ne modifie pas sa portée parentale.

L'une des réponses suggère :

C'est laid et imprévisible, c'est pourquoi je vous recommande d'envelopper vos données dans une variable objet : http://jsfiddle.net/e5rfP/3/

ce qui semble fonctionner. Comment cela se fait-il ?

Answer 1

Une variable objet fonctionne en raison de la manière dont l'héritage prototypique JavaScript fonctionne. ngInclude crée son propre champ d'application enfant. Cette portée enfant hérite prototypiquement de la portée parent.

En JavaScript, lorsque nous écrivons quelque chose comme $scope.x = 22 dans un champ d'application enfant, cela crée un champ d'application x sur l'enfant $scope et lui assigne la valeur 22 -- la chaîne de prototypes n'est pas consultée ici, donc le parent $scope ne voit pas ce qui s'est passé.

Lorsque nous écrivons quelque chose comme $scope.someObj.prop1 = 22 sur le champ d'application enfant, si JavaScript ne trouve pas le champ d'application someObj sur le $scope enfant, il consulte la chaîne de prototypes, et le $scope suivant dans la chaîne est le $scope parent. Si le someObj existe sur le $scope parent, alors le $scope parent est modifié.

Comme je l'ai mentionné dans un commentaire, la question et la réponse suivantes de l'OS expliquent tout cela de manière beaucoup plus détaillée (avec de nombreuses photos) : Quelles sont les nuances de l'héritage prototypique / scope prototypical dans AngularJS ?

Answer 2

Cette directive permet d'inclure un partiel sans créer de nouveau champ d'application. Par exemple, vous pouvez créer un formulaire dans la partie partielle et contrôler ce formulaire à partir du contrôleur parent.

Voici un lien vers le Repo que j'ai créé pour lui.

J'ai basé ma réponse sur cette réponse du S.O. Bonne chance :-)