通過Angular中的子範圍更新父範圍

Question

<div class="full-row" ng-repeat="row in pendingRequests | orderBy: '-modificationDate' | partition:3"> 
         <div class="one-third" ng-repeat="request in row track by request.id"> 
          <div class="incoming_request" ng-class="actionClass(request)"> 
           <div class="request_comments"> 
            <hr> 
            <p><span>Recipients:</span></p> 
            <div class="comments"> 
             <p ng-repeat="comment in request.comments track by comment.id" class="dont-break-out"> 
              <span class="author" ng-bind="comment.userName | employeeName">:</span> 
              {{comment.text}} 
              <span ng-if="comment.status == State.APPROVED" class="approval success" ng-click="changestatus(comment, request)"><i class="fa fa-check"></i></span> 
              <span ng-if="comment.status == State.REJECTED" class="approval error" ng-click="changestatus(comment, request)"><i class="fa fa-times"></i></span> 
              <span ng-if="comment.status == State.PENDING" class="approval" ng-click="changestatus(comment, request)" title="{{showApproveTooltip(comment)?'Click to approve the request on behalf of this user':''}}"><i class="fa fa-clock-o"></i></span> 
             </p> 
            </div> 
           </div> 
           <div class="request_resolve"> 
            <hr> 
            <div class="textarea-holder"> 
             <textarea placeholder="Your comment..." ng-model="request.newComment" ng-model-options="{ updateOn: 'default blur'}"></textarea> 
            </div> 
            <div class="button-container"> 
             <button ng-click="approve(request);" ng-disabled="request.isProcessing" class="btn btn-primary" am-hide-request-resolve-div>Confirm<i ng-hide="request.isProcessing" class="fa fa-check"></i><span ng-show="request.isProcessing" class="spinner no-hover"><a><i class="fa-li fa fa-spinner fa-spin"></i></a></span></button> 
             <button ng-click="reject(request);" ng-disabled="request.isProcessing" class="btn btn-default pull-right" am-hide-request-resolve-div>Reject <i class="fa fa-times"></i></button> 
            </div> 
           </div> 

這裏是代碼的和平。正如你可能看到有很多ng-repeat s。我的pendingRequests集合經常從服務器更新。當我點擊某個按鈕後，3次或更多的更新沒有任何事情發生在用戶界面上。

詳情：

在批准點擊我改變一個comment的status。

$scope.approve = function (request) { 
     var currentUserComment = request.comments.filter(function(comm) { 
       return comm.userId == user.id && comm.status == "Pending"; 
      })[0]; 
     currentUserComment.status = State.APPROVED; // change comments Status 
     currentUserComment.text = request.newComment; 

     delete request.newComment; 

     if (!currentUserComment) { 
      request.isProcessing = false; 
      return; 
     } 

     Comments.update(currentUserComment, function() { 
      // $rootScope.$broadcast('daysUpdated'); 
     }); 

     request.isProcessing = false; 
    }; 

這必須顯示這個跨度<span ng-if="comment.status == State.APPROVED" class="approval success" ng-click="changestatus(comment, request)"><i class="fa fa-check"></i></span>，導致現在的狀態等於State.APPROVED。但沒有任何反應。

經過一番研究，我認爲這都是因爲ng-repeat和收集更新。

ng-repeat創建每個項目的子範圍，所以在播放範圍可能是這樣的：

bookCtrl範圍= {標籤：[「富」，「酒吧」，「巴茲」]}

ng-repeat子作用域：{標籤：「富」}，{標籤：「棒」}，{標籤：「巴茲」}

所以，當我更新comment.status一些request角不知道在什麼範圍之存在。

我對不對？我怎樣才能解決我的問題（改變評論狀態顯示正確的跨度後）？

---

更多簡碼：

<div ng-repeat="request in requests"> 
     <div ng-repeat="comment in request.comments"> 
      <span ng-if="comment.status == State.APPROVED" class="approval success"><i class="fa fa-check"></i></span> 
      <span ng-if="comment.status == State.REJECTED" class="approval error"><i class="fa fa-times"></i></span> 
      <span ng-if="comment.status == State.PENDING" class="approval"><i class="fa fa-clock-o"></i></span> 
     </div> 
     <div> 
      <button ng-click="approve(request)"> 
      Approve 
      </button> 
     </div> 
    </div> 

和批准功能：

var user = LoggeInUser(); // some user who is loggedIn now 
$scope.approve = function(request){ 
      var currentUserComment = request.comments.filter(function(comm)      { 
      return comm.userId == user.id && comm.status == "Pending"; 
     })[0]; 
    currentUserComment.status = State.APPROVED; // change comments Status 

    Comments.update(currentUserComment, function() { // send PUT request to API 
     // $rootScope.$broadcast('daysUpdated'); 
    }); 
} 

Answer 1

您可能會發現在移動功能$ scope.functions.functionName您的解決方案。我認爲，從您的回顧中可以看出，您正在接觸範圍問題，正如您在發言中提到的那樣。

JS

$scope.functions.approve = function() { ... } 

HTML

functions.approve(request) 

您也可以看看使用控制器，有時可以幫助：

https://docs.angularjs.org/api/ng/directive/ngController