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

AngularJS观察者表现问题

1 个答案: