J'essaie de mettre à jour une vue angular.js lors de l'ajout d'un commentaire. Mon code est le suivant:
<div class="comment clearfix" data-ng-repeat="comment in currentItem.comments" data-ng-class="{bubble: $first}" data-ng-instant>
<div>
<p>
<span class="username">{{comment.user}}</span> {{comment.message}}
</p>
<p class="time">
10 minutes ago
</p>
</div>
</div>
<div class="comment reply">
<div class="row-fluid">
<div class="span1">
<img src="assets/img/samples/user2.jpg" alt="user2" />
</div>
<div class="span11">
<textarea class="input-block-level addComment" type="text" placeholder="Reply…"></textarea>
</div>
</div>
</div>
la portée est mise à jour à l'entrée:
$('.addComment').keypress(function(e) {
if(e.which == 10 || e.which == 13) {
$scope.currentItem.comments.Push({
"user": "user3",
"message": $(this).val()
});
console.debug("currentItem", $scope.currentItem);
}
});
le débogage $ scope.currentItem montre que le commentaire a été ajouté, mais la vue n’affiche pas le nouveau commentaire. Je soupçonne que la portée de $ scope est uniquement surveillée à son premier niveau et que c'est pourquoi la vue ne se met pas à jour. est-ce le cas? Si oui, comment puis-je résoudre ce problème?
SOLUTION: Comme Ajay l'a suggéré dans sa réponse ci-dessous, j'ai enveloppé le tableau. Insérez dans la fonction apply comme ceci:
var el=$(this);
$scope.$apply(function () {
$scope.currentChallenge.comments.Push({
"user": $scope.currentUser,
"message": el.val()
});
});
Modifiez le code pour envelopper la portée. $ S’applique parce que vous modifiez la propriété en dehors de la portée angulaire, vous devez utiliser portée. $ Apply ()
Je devais placer mon formulaire dans le même contrôleur div que le ng-repeat. J'ai eu deux contrôleurs div séparés.
<div class="col-sm-12 col-lg-12">
<div class="outer-container">
<div class="inner-container">
<div class="table-header">
<form id="teamForm" name="teamForm">
<table class="table table-bordered">
<thead>
<!-- Grid header -->
<tbody data-ng-if="(allTeamMembers.length==0)">
<tr>
<td class="text-center height_33_p" colspan="15"> {{noResultFound}} </td>
</tr>
</tbody>
<!-- Existing team member -->
<tbody data-ng-repeat="tm in teammemberDetailsArryobject|orderBy:orderByField:reverseSort" data-ng-form="innerForm_$index" data-ng-class="{'ng-submitted':innerForm_$index.$submitted}">
<tr></tr>
</tbody>
Dans le code, je supprime un enregistrement et ajoute une nouvelle ligne par programme, mais toutes les lignes sont affichées dans les lignes ng-repeat (y compris celles supprimées).
Utilisez $ scope. $ Parent.arrayObjet pour modifier les variables parent au lieu de $ scope.arryaObject. Cela a fonctionné dans mon cas.