SentinelSixSpy SentinelSixSpy - 2 years ago 68
Javascript Question

Change display text when focus is lost

I have the option to delete an entity by clicking

DELETE FACILITY
. When this is clicked the words
DELETE FACILITY
are changed to
CLICK AGAIN TO CONFIRM
. I want the words to change back to
DELETE FACILITY
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.facilities.collaborator">DELETE FACILITY</p>
<p id="delete-confirm" class="action-link no-outline" ng-click="delete()" ng-show="confirmDelete" ng-if="permissions.facilities.collaborator">CLICK AGAIN TO CONFIRM</p>
</div>


CONTROLLER

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

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

Answer Source

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()" >
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download