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

Here is peace of code. As You may see there are many ng-repeat s. My pendingRequests collection very often is updated from server. After 3 or more updates when I click on some button nothing is happend on UI.

Details :

On approve click I change status of one comment .

$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;
    };

This must show this span <span ng-if="comment.status == State.APPROVED" class="approval success" ng-click="changestatus(comment, request)"><i class="fa fa-check"></i></span> , cause now status is equal to State.APPROVED . But nothing happens.

After some research I think it all because ng-repeat and collection updates.

ng-repeat creates a child scope for each item, and so the scopes in play might look like this:

bookCtrl scope = { tags: [ 'foo', 'bar', 'baz' ] }

ng-repeat child scopes: { tag: 'foo' }, { tag: 'bar' }, { tag: 'baz' }

So when I update comment.status for some request Angular don't know in what scope it exists.

Am I right? And how can I solve my problem (after changing comment status show correct span)?

---

More Simple code :

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

And approve function :

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

You may find your solution in moving the functions to $scope.functions.functionName. I believe from reviewing this that you are running into scoping issues, as you alluded to in your statement.

JS

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

HTML

functions.approve(request)

You also might have a look at using controller as, sometimes that can help:

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