子スコープで親スコープを更新します。角度は

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上で何も起こらない。

詳細：

では、私は1 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; 
    }; 

これは、今の状態がState.APPROVEDに等しい引き起こし、このスパン<span ng-if="comment.status == State.APPROVED" class="approval success" ng-click="changestatus(comment, request)"><i class="fa fa-check"></i></span>を示さなければなりません。しかし、何も起こりません。

調査の結果、ng-repeatとコレクションの更新がすべてだと思います。

ng-repeatは、各項目の子スコープを作成し、その劇中のスコープは、次のようになります。

bookCtrlスコープ= {タグ：[ 'FOO'、 'バー'、 'バズ']}

ng-repeat子スコープ：{タグ： 'FOO'}、{タグ： 'バー'}、{タグ： 'バズ'}私が更新するとき

ので、いくつかのrequest角度のためのcomment.statusはどのような範囲でそれを知りません存在する。

私は正しいですか？そして、どのように私の問題を解決することができますか？

---

よりシンプルコード：

<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