Die angular.js-Ansicht wird nicht aktualisiert, wenn das verschachtelte $ scope-Array aktualisiert wird

Question

Ich versuche, eine angular.js-Ansicht selbst zu aktualisieren, wenn ich einen Kommentar hinzufüge. Mein Code ist wie folgt:

<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> 

der Umfang aktualisiert auf eingeben:

$('.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); 
    } 
}); 

Debuggen $ scope.currentItem zeigt, dass der Kommentar zu ihm hinzugefügt wurde, jedoch die Ansicht zeigt nicht die neuer Kommentar. Ich vermute, dass der $ scope nur auf seiner ersten Ebene beobachtet wird und dass deshalb die Ansicht nicht aktualisiert wird. Ist das der Fall? Wenn ja, wie kann ich es beheben?

LÖSUNG: Als Ajay in seiner Antwort vorgeschlagen unten ich das Array Push in die Anwendung Funktion wie folgt gewickelt:.

var el=$(this); 
$scope.$apply(function() { 
    $scope.currentChallenge.comments.push({ 
     "user": $scope.currentUser, 
     "message": el.val() 
    }); 
}); 

Answer 1

den Code in Umfang zu wickeln ändern $ anzuwenden, weil Sie die Eigenschaft außerhalb modifizieren der Winkelbereich, den Sie verwenden müssen scope.$apply(), um die Werte zu beobachten

Answer 2

Ich musste mein Formular innerhalb der gleichen Div-Controller als die ng-Wiederholung. Ich hatte zwei separate Div-Controller.

Answer 3

Verwenden Sie $ scope. $ Parent.arrayObjet, um die übergeordneten Variablen anstelle von $ scope.arryaObject zu ändern. In meinem Fall hat es funktioniert.

Answer 4

<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> 

Im Code, den ich einen Datensatz bin zu löschen und neue Zeile programmatisch hinzufügen, aber alle Zeilen in den ng-Repeat-Zeilen (einschließlich der gelöschten)