I have a button inside a div. The button should be visible only when mouse is over the div. This works well on PC with mouse. However, on a tablet or phone, mouse over event is triggered when you first touch the div. The problem is that if you touch the place where the button is (although invisible yet), it will make the button visible and trigger its click event at the same time. So, how can I delay the button click event?
Here is my sample code:
<div ng-mouseenter="isMouseOver=true" ng-mouseleave="isMouseOver=false">
<div>OTHER STUFF</div>
<button ng-show="isMouseOver" ng-click="clicked()">Click</button>
</div>
you can try to unbind the click event using jquery. try something like:
hml:
<div ng-mouseenter="isMouseOver=true" ng-mouseleave="isMouseOver=false">
<div>OTHER STUFF</div>
<button id="beingClicked" ng-show="isMouseOver" ng-click="clicked()">Click</button>
</div>
js (jQuery)
//if is a mobile device
if(!!('ontouchstart' in window)){//check for touch device
$('#beingClicked').off('click');
}
P.s: It is not tested by worth giving atry.
Related
I have a bootstrap popover which has 2 buttons Yes or No. Based on the response from the user i need to call AngularJS service function. How do i do that??
Popover is created only if it meets a certain criteria (like existence of duplicate records)
HTML code looks something like below, but currently doesn't have 2 buttons & still need to work on it
$(document).ready(function () {
if (DuplicateRecord) {
$('[data-toggle="popover"]').popover();
}
});
<button href="#" data-toggle="popover" title="Popover Header"
data-content="Some content inside the popover" data-trigger="click"
data-html="false" data-placement="left">
Toggle popover
</button>
Looks like you are mixin concepts (or maybe I'm not getting your question), you can have a popover but the data-trigger="click" makes showing the popover on the click event and you wanna use that event to call the service method. Change the popover trigger to hover and then use the click event to call your service. Something like this just as an idea, the snippet is not tested.
<button
type="button"
data-toggle="popover"
title="Popover Header"
data-content="Some content inside the popover"
data-trigger="hover"
data-html="false"
data-placement="left"
ng-click="$ctrl.callSomeMethod()"
>
Toggle popover
</button>
You can take a look to UI Bootstrap lib which has a directives for the Bootstrap's components equivalents.
I using ui bootstrap tooltip plugin with something like this:
<button type="button" uib-tooltip="new item">
new item
</button>
<button ng-disabled="vm.testDisabled()">
search
</button>
angular.module('rgh').controller('CourseController', CourseController);
function CourseController () {
function testDisabled() {
console.log('testDisabled called')
return false;
}
}
but the problem is that when i hover on new item button, i see the testDisabled called logs in chrome console, i think its inappropriate behavior from uib-tooltip.
how can i resolve this problem?
It's not inappropriate, it's how angular works! when you pass over your button and the tooltip shows the digest loop runs, because you've provided your ngDisabled with a function, that function will run on each digest cycle (even when it is not needed) because it's returned result will be used to tell angular if it should disable the input or not!!
To avoid this, pass ngDisabled with a variable that will be changed in your controller on certain conditions
<button ng-disabled="vm.isTestDisabled">
search
</button>
I am trying to implement segmented control button instead of normal radio button in Angular
Although If i remove CSS class, normal radio button is working fine and remain selected on navigating to another page os clicking anywhere on the same page, but after adding CSS, radio button selection do not remain intact and deselects.
Please help with this
HTML Code :
<div class ="segmented-control">
<div ng-repeat="p in LP">
<a href="#" class="list-group-item">
<label> {{p.label}}
<input type ="radio" ng-model="test" name="test" value="{{p.value}}" ng-click="getElement($event)"></label>
</a>
</div>
</div>
CSS :
.segmented-control input[type="radio"] {
visibility:hidden;
}
.segmented-control .list-group-item {
display: inline-block;
}
In controller.js
calling below function to get the value of radio button
$scope.getElement= function(obj){
$scope.test = obj.target.value;
}
There are 2 issues with your code:
You have nested elements <div><a tag><label><radio></label> but the ng-model will be set only when you click exactly on the label. If you click little outside the label the ng-model will not be updated.
The gray color change that you see when you click on the segmented button does not mean that the radio button is selected. It is applying the following bootstrap class a.list-group-item:focus which means the button is in focus. That is why when you click outside the button the color changes back to white.
To solve this you have to add extra class to highlight the selected button and make sure your ng-model is updated no matter where the user clicks inside the div.
I have created a sample jsfiddle to demonstrate both the issues. Good luck and welcome to Stackoverflow!
I have a list of element inside an ng-repeat for which elements are clickable and draggable : if I click I display, and if I drag ... I drag the element.
When dragging I am displaying a circle with the number of element to drag.
My problem is that when a click, the drag circle is displayed. Whereas I just want to click and not drag.
Is there a way to set like 2s when clicking, like a long press action (with the mouse) to distinguish the click from the drag actions ?
It is similar to this post but now I want to prevent the drag when clicking (in the Angular way).
Here some markup :
<div class="docs-manager-doc box-container" ng-class="{'showActions':doc.showActions}">
<a class="box-square" ng-href ng-click="docsManager.toggleDocumentSelection(doc)">
<span class="flaticon-dark"
ng-class="{ 'flaticon-video-embed':(!doc.selected && doc.ref && doc.targetType==='EMBEDDED_VIDEO'),
'flaticon-{{doc.label | docExtMap}}':!doc.selected && !doc.ref,
'flaticon-tick':doc.selected }" ibp-prevent-drag>
</span>
</a>
<a ng-drag="true" ng-drag-data="doc" ng-drag-success="onDragComplete($data)" ng-drag-begin="onDragStart($data)" ng-drag-stop-move="onDragStop($data, $event)">
<span class="box-drag">
<span class="dragging" ng-show="iamdragging" >
<span class="flaticon-dark flaticon-small">
<p class="flaticon-default-doc">{{docsManager.documents.selected.length}}</p>
</span>
</span>
</span>
</a>
</div>
I am using ngDraggable directive.
Here some code if it helps :
.controller('DocumentsManagerCtrl', ['...',
function(...) {
$scope.iamdragging = false;
$scope.onDragStop = function(data, event){
$scope.iamdragging = false;
};
$scope.onDragStart = function(data){
if(!data.selected){
$scope.docsManager.toggleDocumentSelection(data);
}
$scope.iamdragging = true;
};
$scope.onDragComplete = function(){
// do something
};
May be it could be good to have a directive like ng-click-or-drag, when the click is more than 2s it is interpreted as a drag.
The issue has been solved here partially. https://github.com/fatlinesofcode/ngDraggable/issues/12. Posting in case it is useful to someone else browsing the question.
Setting ng-prevent-drag="true" on any element that you do want to initiate drag action, disables the drag action initiation on that object.
I guess benek who has asked this question is also involved in the discussion in the link above. he has indicated that this breaks on ipad, however I have tested this on laptop where it works.
I have implemented ng-drag-after-timeout="2000" attribute which allows to manage this.
The patch is here https://github.com/advantiss/ngDraggable/commit/51bd0e16b3f363935b249b2ee185968f4999f87d
I fixed this by making my image (which was a problem) a vice .
The DIV had a background-image: url();
Problem solved for me
I am using the Popover AngularStrap using the trigger focus on a . The problem is that this trigger just works in a button element, however, the rest of the triggers can be used in a , Is there a way to make it works in a image?
Is this what you are looking for?
<a href="javascript:" title="{{popover.title}}" data-content="{{popover.content}}" data-template="popover/docs/popover.tpl.demo.html" data-animation="am-flip-x" bs-popover>
<img src="/my/image/path" />
</a>