AngularJSウォッチャーのパフォーマンスの問題

Question

AngularJSでパフォーマンスの問題があります。 AngularJS Batarangから分析した後、私はたくさんのウォッチャーが作成されている問題を特定することができました。以下は、パフォーマンス最適化の原因となるコードスニペットです。以下は

<table> 
    <tr> 
     <td style="padding:10px; width:20%">Response Summary: </td> 
     <td style="padding: 15px; width: 80%"> 
      <textarea class="form-control" rows="4" name="Response_Summary" ng-model="_sAResponses.sA_Response.sA_Response_Summary" disabled></textarea> 
     </td> 
    </tr> 
    <tr> 
     <td style="padding: 10px; width: 20%">Remarks: <label style="color: red;">*</label> </td> 
     <td style="padding: 15px; width: 80%"> <textarea class="form-control" rows="4" name="Response_Remark" ng-model="_sAResponses.validator_Comment" ng-disabled=" _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9 || _sAResponses.sA_Response.sA_Response_Status_Key == 19" style="text-align:left" required></textarea></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td style="padding:15px"><button type="button" class="btn btn-default" ng-click="toggleAllRemarks(_sAResponses)">All Validator Remarks</button></td> 
    </tr> 
    <tr> 
     <td colspan="2" style="padding:10px"> 
      <div> 
       <table style="width:100%" border="1"> 
        <tr> 
         <th colspan="3"> 
          <center>Supporting Artifacts Details</center> 
         </th> 
        </tr> 
        <tr> 
         <th>Note</th> 
         <th>Ticket number</th> 
         <th>File Name</th> 
        </tr> 
        <tr ng-repeat="evidences in ::_sAResponses.sA_Response.sA_Supporting_Evidences"> 
         <td>{{::evidences.sA_Supp_Evidence_Short_Note}}</td> 
         <td> 
          {{::evidences.sA_Supp_Evidence_Ticket_Number}} 
         </td> 
         <td><a href="{{ ::Url }}/Admin/api/SAValidateResponse?_Evidence_Key={{::evidences.sA_Supp_Evidence_Key}}">{{::evidences.evidence_file_name}}</a></td> 
        </tr> 
       </table> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td style="padding: 10px; width: 20%"> 
      <div ng-show="PageMode == 'SelfAssessmentValidateResponse'"> 
       Upload Validator Document: 
      </div> 
     </td> 
     <td style="padding: 15px; width: 80%"> 
      <div ng-show="PageMode == 'SelfAssessmentValidateResponse'"> 
       <input type="file" class="form-control" ng-disabled="_sAResponses.validator_file_name || _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9 " onchange="angular.element(this).scope().selectedFile(this)" /> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div style="padding: 10px; width: 20%"> 
       <div ng-show="_sAResponses.validator_file_name!=null"> 
        Validator Document: 
       </div> 
      </div> 
     </td> 
     <td> 
      <div ng-show="PageMode == 'SelfAssessmentValidateResponse'"> 
       <div ng-show="_sAResponses.validator_file_name!=null" style="padding-left:15px"> 
        <a href="{{ Url }}/Admin/api/SAValidateResponse?_Responsekey={{::_sAResponses.sA_Resp_Validator_Type_Map_Key}}">{{::_sAResponses.validator_file_name}}</a> 
        <span ng-show="(_sAResponses.member_Key == memberkey) && (_sAResponses.sA_Response.sA_Response_Status_Key == 10 || _sAResponses.sA_Response.sA_Response_Status_Key == 17 || _sAResponses.sA_Response.sA_Response_Status_Key == 18)"> 
                             <a ng-click="onDeleteValidatorUpload(_sAResponses)" href=""> 
                              <span class="glyphicon glyphicon-remove" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete"> 
                              </span> 
        </a> 
        </span> 
       </div> 
      </div> 
      <div ng-show="PageMode == 'ManageEscalation'"> 
       <div ng-show="_sAResponses.validator_file_name!=null" style="padding-left:15px"> 
        <a href="{{ ::Url }}/Admin/api/SAValidateResponse?_Responsekey={{::_sAResponses.sA_Resp_Validator_Type_Map_Key}}">{{::_sAResponses.validator_file_name}}</a> 
       </div> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td style="padding: 10px; width: 20%"> Status: <label style="color: red;">*</label></td> 
     <td style="padding: 15px; width: 80%"> 
      <div ng-show="PageMode == 'SelfAssessmentValidateResponse'"> 
       <select class="form-control" id="StatusDropDown1" name="StatusDropDown" ng-model="_sAResponses.validation_status_key" ng-disabled="_sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9 " ng-change="ddlstatuschange(_sAResponses.validation_status_key)" ng-options="s.sA_Response_Status_Key as s.sA_Response_Status_Name for s in _sAResponses.sA_Response.all_Sa_Response_Status"> 
                            <option value="">--Select Status--</option> 
                           </select> 
      </div> 
      <div ng-show="PageMode == 'ManageEscalation'"> 
       <select class="form-control" id="StatusDropDown2" name="StatusDropDown" ng-model="manageEscalateStatus"> 
                            <option value="">--Select Status--</option> 
                            <option value="11">Response Rejected</option> 
                            <option value="8">Revised Response Sought</option> 
                           </select> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="5" style="padding:10px"> 
      <center> 
       <div ng-show="PageMode == 'SelfAssessmentValidateResponse'"> 
        <div ng-show="_sAResponses.validation_status_key == undefined"> 
         <button type="button" class="btn btn-default" ng-disabled="!ResponseForm.Response_Remark.$valid ||!ResponseForm.StatusDropDown.$valid || _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9" ng-click="updateResponse(_sAResponses,_sAResponses.validation_status_key,'save')"> 
                              Save 
                             </button> 
        </div> 
        <div ng-show="_sAResponses.validation_status_key != undefined"> 
         <button type="button" class="btn btn-default" ng-disabled="!ResponseForm.Response_Remark.$valid || !ResponseForm.StatusDropDown.$valid || _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9" ng-click="updateResponse(_sAResponses,_sAResponses.validation_status_key,'validate')">Validate</button> 
        </div> 
       </div> 
       <div ng-show="PageMode == 'ManageEscalation'"> 
        <div ng-show="manageEscalateStatus == '' || manageEscalateStatus == undefined"> 
         <button type="button" class="btn btn-default" ng-disabled="!ResponseForm.Response_Remark.$valid ||!ResponseForm.StatusDropDown.$valid || _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9" ng-click="updateResponse(_sAResponses,manageEscalateStatus,'save')"> 
                              Save 
                             </button> 
        </div> 
        <div ng-show="manageEscalateStatus != undefined"> 
         <button type="button" class="btn btn-default" ng-show="manageEscalateStatus != ''" ng-disabled="!ResponseForm.Response_Remark.$valid ||!ResponseForm.StatusDropDown.$valid || _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9" ng-click="updateResponse(_sAResponses,manageEscalateStatus,'validate')">Validate</button> 
        </div> 
       </div> 
      </center> 
     </td> 
    </tr> 
</table> 

Batarang

どのように私は上記のコードを最適化することができますのスクリーンショットですか？

Answer 1

二方向バインディングを必要としない項目にワンタイム式バインディングを使用するには、{{:: your_model}}構文を使用します。たとえば、上記のコードでは、{{evidences.evidence_file_name}}の代わりに{{::evidences.evidence_file_name}}を使用します。