AngularJS ||执行其他模糊操作时，忽略ngBlur元素模糊

Question

在开发过程中，我遇到了两次触发模糊的问题，当我需要只触发一次时。

ng-blur和ng-enter最终操作都是向数据库发出请求，在我们的情况下，只需要1个请求，或者从ng-blur或ng-enter完成2个请求。问题是ng-enter行为导致失去对与ng-blur连接的元素的关注。

以下是我的两个问题：

• 有没有办法阻止Angularjs在todo div上触发ng-blur 何时执行ng-enter？

• 如果第一个问题没有解决方案，我真的希望那里 那么，我有什么选择？

您可以在下面看到导致我的问题的部分代码。

template.html

   <div ng-repeat="todo in todos" ng-enter="stopEditTodo($index, $event, todo);" ng-dblclick="editTodo($event);">
        <div class="card-details">
            <div class="card-content">
                <span ng-blur="stopEditTodo($index, $event, todo);">
                        {{todo.title}}
                </span>
            </div>
        </div>
    </div>

controller.js

app.controller('homeController', function($scope, Todos, $state){

    $scope.editTodo = function($event) {
        var text = angular.element(angular.element(event.currentTarget).find('span')[0]);
        $event.preventDefault();
        text.attr("contenteditable", "true");
    }

    $scope.stopEditTodo = function($index, $event, todo) {
        angular.element(event.currentTarget).removeAttr('contenteditable');
    }
});

directive.js

app.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });

                event.preventDefault();
            }
        });
    };
});

谢谢你的时间！

Answer 1

由于split_sorted = df.pair.str.split('_').map(sorted) df_switch = pd.concat([split_sorted.str[0], split_sorted.str[1], df['volume']], axis=1, keys=['country1', 'country2', 'volume']) df_switch.groupby(['country1', 'country2'], as_index=False, sort=False).sum() 会触发 country1 country2 volume 0 CHN USA 15 1 AFG ALB 7 ，因此您无法在ng-blur中执行任何操作来阻止其发生。

另一方面，您有几个选择：

选项＃1 - 检查$evalAsync触发

时内容是否仍可编辑

ng-enter

请注意，所有这些都可以通过完全自定义的指令来完成，以封装直接的DOM操作。

有关示例，请参阅plunker。

选项＃2 - 去抖动

这更加“hacky”但它通常可以解决问题 - 使用stopEditTodo函数（即Lodash）使您的处理程序每​​X毫秒只触发一次。就是这样：

var target = angular.element(event.target);
if (target.attr('contenteditable')) {
    target.removeAttr('contenteditable');
    // fire request
}

这应该适用于大多数使用场景。

旁注：您似乎应该使用debounce代替$scope.stopEditTodo = _.debounce(function($index, $event, todo) { angular.element(event.currentTarget).removeAttr('contenteditable'); // fire request }, 300); ，因为后者始终会引用父event.target而不是event.currentTarget实际列表项（你想要的）。或者，您可以将div移动到列表项而不是父项。