[英]AngularJS 1.6 crash IE 11 with ng-i18next Directive
在IE 11上運行AngularJs(1.6)應用程序時遇到問題,當用戶輸入一些文本和表情符號圖標時,它崩潰並關閉瀏覽器。 10-20次中有2次遇到問題。 我被懷疑存在內存泄漏,但與此同時,如果“應用程序”不需要用戶輸入,則不會崩潰。 我想知道是否有人可以幫助我。
圖書館:
<script src="js/lib/jquery.js"></script>
<script src="js/lib/lodash.min.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/emoji-picker.min.js"></script>
<script src="js/lib/rzslider.min.js"></script>
<script src="js/lib/angular-rating-icons.js"></script>
<script src="js/lib/ui-bootstrap-tpls.min.js"></script>
用戶輸入部分:
<div ng-if="showInput" class="slide-top" id="inputBox">
<div class="inputMessageHeader" ng-i18next="chatbot.userinput.title" ng-attr-style="background-color: {{primaryColor}}" style="background-color: {{primaryColor}}"></div>
<form class="full-height">
<div layout="row">
<div flex id="inputUser">
<textarea maxlength="2000"
ng-model="components[currentQaIndex].usrMessage"
ng-i18next="[placeholder]chatbot.userinput.placeholder"
rows="5" ng-keyup="countCharacters()"
ng-change="hideEmojiPicker()">
</textarea>
<div class="counter"><span ng-class="{error: components[currentQaIndex].usrMessage.length > 2000}"> {{components[currentQaIndex].usrMessage.length || 0}} </span> / 2000</div>
</div>
<div id="gifArea" ng-if="messageGifUrl" flex="45">
<img ng-src="{{messageGifUrl}}" />
<md-button id="gifEdit" ng-click="toggleGifPopup()" aria-label="edit" class="md-icon-button launch fa fa-pencil-square-o"></md-button>
<md-button id="gifDelete" ng-click="deleteGif()" aria-label="delete" class="md-icon-button launch fa fa-trash-o"></md-button>
</div>
</div>
<div id="separatorLine"></div>
<div class="form-action">
<div class="gif-btns">
<div emoji-picker="components[currentQaIndex].usrMessage" title="Emoji" placement="top" output-format="unicode" class="emoji" ng-click="toggleEmojiPicker()" ng-class="{active: emojiVisible}" on-change-func="hideEmojiPicker">
</div>
<span class="gif" ng-click="toggleGifPopup()" ng-class="{active: gifPopupVisible}"></span>
<span class="gallery"></span>
<span class="camera"></span>
</div>
<div class="btns" >
<span ng-i18next="chatbot.calltoactions.cancel" class="blink-btn" ng-attr-style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" ng-mouseenter="setDarkerColor($event)" ng-mouseleave="setPrimaryColor($event)" ng-click="onCancelQuestion()" ng-if="isOther" ></span>
<span ng-i18next="chatbot.calltoactions.ok" class="blink-btn" ng-attr-style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" ng-mouseenter="setDarkerColor($event)" ng-mouseleave="setPrimaryColor($event)" ng-click="onSaveUserMessage($event)" ng-if="isOther"></span>
<span ng-i18next="chatbot.calltoactions.validate" class="blink-btn" ng-attr-style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" ng-mouseenter="setDarkerColor($event)" ng-mouseleave="setPrimaryColor($event)" ng-click="onSubmitAnswer($event)" ng-if="!isOther"></span>
<span ng-i18next="chatbot.calltoactions.skip" class="blink-btn" ng-attr-style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" style="color: {{primaryColor}}; border-bottom-color: {{primaryColor}}" ng-mouseenter="setDarkerColor($event)" ng-mouseleave="setPrimaryColor($event)" ng-click="onSkipQuestion($event)" ng-if="components[currentQaIndex].options.is_skippable && !isOther" ></span>
</div>
</div>
</form>
</div>
您在用戶輸入上有一些錯誤的代碼,這就是我從您的發言中得出的唯一結論。 發布一些代碼或檢查您的用戶輸入,您可能正在執行一些循環或遞歸操作,或者摘要周期過多。 順便說一句,您可以在其他瀏覽器上重復和復制嗎? 輸入輸入時,請注意IE上的內存和CPU使用情況。 除非角度被破壞,否則您的身體已經有些碎裂了。 但是,我不會得出這個結論。
<textarea maxlength="2000" ng-model="components[currentQaIndex].usrMessage"
ng-i18next="[placeholder]chatbot.userinput.placeholder" rows="5"
ng-keyup="countCharacters()" ng-change="hideEmojiPicker()">
</textarea>
在這里使用某種ng-model-option
和debounce。 什么是countCharacters? 您可以在模型上執行.length或使用$viewValue.length
我沒有看到任何$viewValue.length
錯誤,可以進行一些優化,但這里什么也不應完全消亡。 在chrome和其他瀏覽器中對此進行測試,並使用斷點和日志記錄來查看其崩潰的原因。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.