Question

我可以点击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>

CONTROLLER

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

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

Answer 1

尝试使用ngBlur：https://docs.angularjs.org/api/ng/directive/ngBlur

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

<强> UPD

然后你可以使用一些检测特定DOM元素之外任何地方的点击的指令，例如像这样：

.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()" >

Answer 2

您可能遇到使用ng-blur的问题，因为语句似乎位于div中，默认情况下它不是：focus-able元素。请尝试使用按钮。

Answer 3

奇怪ng-blur="resetConfirmDelete"没有用，这是我所知道的正确解决方案。

当第二个<p>出现时，焦点永远不会丢失，ng-blur永远不会被激活。

同时尝试将ng-blur添加到第一个<p>而不是第二个@RunWith(Parameterized.class) public class OrderTest { private Order order; public OrderTest(byte id, byte coffee, byte cafelatte, byte smoothie, byte iceCoffee) { order = new Order(new byte[] {id, coffee, cafelatte, smoothie, iceCoffee}); } @Parameters public static Collection order() { return Arrays.asList(new byte[][] { {1, 1, 0, 0, 0}, {2, 1, 1, 0, 0}, {3, 1, 1, 1, 1}, {14, 80, 127, 127, 127} }); }，假设它会在第二个出现时聚焦。

Answer 4

编辑以获得更好的答案..

您需要在元素之间交换隐藏/显示并同时关注一个。

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

你需要这句话：

ng-focus="confirmDelete"
ng-blur="blurDelete()"

焦点丢失时更改显示文本

4 个答案: