我可以通过单击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/