Question

我为字符计数器创建了一个指令character-counter，当用户将文本输入到textarea时，它按预期工作但我在这里遇到一个问题，当用户完成输入textarea我必须点击保存发布数据，但由于focusOut我必须在保存按钮上单击两次所以首先单击它会聚焦计数器，然后第二次单击我能够保存数据。

是否有其他解决方案可以解决我可以用于此指令的问题？

main.html中

<div class="row">
    <div class="col-md-12">
        <textarea rows="8" class="textAreaModal" ng-model="ratingQstnResult.rationaleSelect[ratingQstnResult.rationaleSelectedKey]" maxlength="4000" character-counter></textarea>
    </div>
</div>
<div class="row">
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary pull-right" ng-click="rationaleWin.close();">Save</button>
        <button class="btn btn-default" ng-click="ratingQstnResult.rationaleSelect[ratingQstnResult.rationaleSelectedKey]=null; rationaleWin.close();">Cancel</button>
    </div>
</div>

directive.js

angular.module('riskAssessmentApp').directive('characterCounter', function () {
  'use strict';
    return{
        restrict: 'A',
        require: '^ngModel',
        link: function (scope, element, attrs, ngmodel) {
            var characterCount;
            element.after('<p class="character-count" style="display: none;"><span class="characters-left"></span> characters left</p>');
            element.focus(function(){
                element.next().show();
            });
            element.focusout(function(){
                element.next().hide();
            });
            scope.$watch(function(){
                return ngmodel.$viewValue;
            }, function(newVal){
                if(newVal){
                    characterCount = parseInt(attrs.maxlength - newVal.length, 10);

                } else{
                    characterCount = parseInt(attrs.maxlength, 10);
                }
                element.next().find('.characters-left').text(characterCount);

            });
        }
    };
});

Answer 1

您不会从focusout（）方法返回事件，并且事件不会传播。试试这个：

10-29 10:51:26.605  27188-27188/? E/art? Throwing OutOfMemoryError "Failed to allocate a 22227766 byte allocation with 14873872 free bytes and 14MB until OOM"
10-29 10:51:26.605  27188-27188/? E/AndroidRuntime? Error reporting crash
    java.lang.OutOfMemoryError: Failed to allocate a 22227766 byte allocation with 14873872 free bytes and 14MB until OOM
            at java.lang.AbstractStringBuilder.enlargeBuffer(AbstractStringBuilder.java:95)
            at java.lang.AbstractStringBuilder.append0(AbstractStringBuilder.java:125)
            at java.lang.StringBuffer.append(StringBuffer.java:278)
            at java.io.StringWriter.write(StringWriter.java:123)
            at com.android.internal.util.FastPrintWriter.flushLocked(FastPrintWriter.java:358)
            at com.android.internal.util.FastPrintWriter.appendLocked(FastPrintWriter.java:303)
            at com.android.internal.util.FastPrintWriter.write(FastPrintWriter.java:625)
            at com.android.internal.util.FastPrintWriter.append(FastPrintWriter.java:658)
            at java.io.PrintWriter.append(PrintWriter.java:691)
            at java.io.PrintWriter.append(PrintWriter.java:31)
            at java.lang.Throwable.printStackTrace(Throwable.java:324)
            at java.lang.Throwable.printStackTrace(Throwable.java:300)
            at android.util.Log.getStackTraceString(Log.java:335)
            at com.android.internal.os.RuntimeInit.Clog_e(RuntimeInit.java:59)
            at com.android.internal.os.RuntimeInit.access$200(RuntimeInit.java:43)
            at com.android.internal.os.RuntimeInit$UncaughtHandler.uncaughtException(RuntimeInit.java:85)
            at java.lang.ThreadGroup.uncaughtException(ThreadGroup.java:693)
            at java.lang.ThreadGroup.uncaughtException(ThreadGroup.java:690)

如何使用AngularJS指令修复Jquery焦点问题？

1 个答案: