通过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。我的pendingRequests集合经常从服务器更新。经过3次或更多次更新后，当我点击某个按钮时，UI上没有任何内容。

详细信息：

批准点击后，我更改了一个status的{​​{1}}。

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; }; ，因为现在状态等于<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为每个项目创建子范围，因此播放范围可能如下所示：

bookCtrl scope = {tags：[＆＃39; foo＆＃39;，＆＃39; bar＆＃39;，＆＃39; baz＆＃39; ]}

ng-repeat子范围：{tag：＆＃39; foo＆＃39; }，{tag：＆＃39; bar＆＃39; }，{tag：＆＃39; baz＆＃39; }

因此，当我更新ng-repeat某些comment.status时，Angular不知道它存在于哪个范围内。

我是对的吗？如何解决我的问题（更改评论状态后显示正确的跨度）？

更简单的代码：

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>

Answer 1

您可以找到将函数移动到$ scope.functions.functionName的解决方案。正如你在陈述中所提到的那样，我相信通过审阅这个问题，你正在遇到范围问题。

<强> JS

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

<强> HTML

functions.approve(request)

你也可以看一下使用控制器，有时可以提供帮助：

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