Change display text when focus is lost

Question

I have the option to delete an entity by clicking DELETE ENTITY . When this is clicked the words DELETE ENTITY are changed to CLICK AGAIN TO CONFIRM . I want the words to change back to DELETE ENTITY if the focus is lost on the button. I tried using ng-blur="resetConfirmDelete" , but that didn't work. Any ideas?

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

Try using ngBlur for this: https://docs.angularjs.org/api/ng/directive/ngBlur

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

UPD

Then you may make use of some directive that detects click anywhere outside of the specific DOM element, for example like this one:

.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);
                };
            }
        };
    });

then in the template you can do:

<p id="delete-confirm" class="action-link no-outline"
click-else-where="resetConfirmDelete()" >

Answer 2

You might be running into a problem using ng-blur because the statements appear to be in a div, which is not a :focus-able element by default. Try using a button instead.

Answer 3

Weird that ng-blur="resetConfirmDelete" didnt work, it is the right solution as much as i know.

Maybe the second <p> is not being focused when it appears there for the focuse is never lost and ng-blur is never activated.

Also try adding the ng-blur to the first <p> instead of the second one, assuming it will be focused when the second one appears.

Answer 4

Editted for better answer..

You need to swap the hide/show between elements and focus one at same time.

<!--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>

u'll need this lines:

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