I want to develop a custom directive that displays a popup bubble when the user taps and holds on an element. Everything works fine when I use the on-hold directive, but when I utilize the ionicGesture service, I encounter issues with setting focus on the displayed element. Below is the code snippet that successfully implements the functionality using the on-hold directive:
app.directive("copyContent", function ($rootScope, $compile, $document, $timeout) {
return {
link: function ($scope, $element, $attr) {
var popup = "<div class='copy-popup' ng-show='copying'><input type='button' value='Copy' ng-click='copyItem()' ng-blur='removePopup()' class='button button-dark'></div>";
var el = $compile( popup )( $scope );
$element.append( el );
$scope.$watch('copying', function(newValue, oldValue) {
$timeout(function () {
if (newValue){
$element.addClass('copy-select');
el.find('input').focus();
}
});
});
$scope.removePopup = function(){
$scope.copying = false;
$element.removeClass('copy-select');
};
$scope.copyItem = function () {
var copyString = $attr.copyContent;
console.log(copyString);
if(cordova.plugins){
cordova.plugins.clipboard.copy(copyString);
}
$scope.removePopup();
};
}
};
});
and the html:
<div ng-repeat="comment in comments track by $index" class="message-wrapper">
<div class="chat-bubble right" copy-content="{{comment}}" on-hold="copying = true"></div>
</div>
When I attempt to remove the on-hold directive from the HTML and instead use the ionicGesture service within the copy-content directive, the following code fails to work as expected:
app.directive("copyContent", function ($rootScope, $compile, $document, $timeout, $ionicGesture) {
return {
link: function ($scope, $element, $attr) {
var popup = "<div class='copy-popup' ng-show='copying'><input type='button' value='Copy' ng-click='copyItem()' ng-blur='removePopup()' class='button button-dark'></div>";
var el = $compile( popup )( $scope );
$element.append( el );
$scope.removePopup = function(){
console.log('blur');
$scope.copying = false;
$element.removeClass('copy-select');
};
$scope.copyItem = function () {
var copyString = $attr.copyContent;
if(cordova.plugins){
cordova.plugins.clipboard.copy(copyString);
}
$scope.removePopup();
};
$ionicGesture.on("hold", function(){
$scope.copying = true;
$timeout(function () {
console.log('focus');
$element.addClass('copy-select');
el.find('input').focus();
});
}, $element);
}
};
});
and the html:
<div ng-repeat="comment in comments track by $index" class="message-wrapper">
<div class="chat-bubble right" copy-content="{{comment}}"></div>
</div>
Although the popup appears correctly, the removePopup function triggered by ng-blur does not execute when clicking outside the input type=button. The discrepancy between using the ionicGesture service and the on-hold directive raises questions about why ng-blur behaves differently. Any insights into this issue?