我可以通过单击DELETE ENTITY来删除实体。单击此按钮时,单词DELETE ENTITY将更改为CLICK AGAIN TO CONFIRM。如果按钮上的焦点丢失,我希望单词改回DELETE ENTITY。我试过用ng-blur="resetConfirmDelete",但没用。有什么想法吗?
HTML格式

<!--Delete entity-->
  <p class="action-link no-outline" ng-click="setConfirmDelete()" ng-show="!confirmDelete" ng-if="permissions.entities.collaborator">DELETE ENTITY</p>
  <p id="delete-confirm" class="action-link no-outline" ng-click="delete()" ng-show="confirmDelete" ng-if="permissions.entities.collaborator">CLICK AGAIN TO CONFIRM</p>
</div>

控制器
$scope.setConfirmDelete = function () {
  $scope.confirmDelete = true;
};

$scope.resetConfirmDelete = function () {
  $scope.confirmDelete = false;
}

最佳答案

尝试使用ngBlur进行此操作:https://docs.angularjs.org/api/ng/directive/ngBlur

 <p id="delete-confirm" class="action-link no-outline" ng-blur=resetConfirmDelete()">..</p>

升级版
然后,您可以使用一些指令来检测特定DOM元素之外的任何地方的click,例如:
.directive('clickElsewhere', function($parse, $rootScope) {
        return {
            restrict: 'A',
            compile: function($element, attr) {
                var fn;
                fn = $parse(attr['clickElsewhere']);
                return function(scope, element) {
                    var offEvent;
                    offEvent = $rootScope.$on('click', function(event, target) {
                        if (element.find($(target)).length || element.is($(target))) {
                            return;
                        }
                        return scope.$apply(function() {
                            return fn(scope);
                        });
                    });
                    return scope.$on('$destroy', offEvent);
                };
            }
        };
    });

然后在模板中可以执行以下操作:
<p id="delete-confirm" class="action-link no-outline"
click-else-where="resetConfirmDelete()" >

关于javascript - 失去焦点时更改显示文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37394326/

10-12 12:41
查看更多