javascript - 如何使用 AngularJS 指令解决 Jquery 焦点问题？

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>

指令.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() 方法返回事件，并且事件没有传播。试试这个:

element.focusout(function(event){
                element.next().hide();
                return event;
            });