So I am tracking down a bug that I can't quite get a handle around. The problem is this, if you have a button with ng-select on it, unfocus the browser (click on desktop) and then double click on the button, it opens up the browser file system dialogue twice, throwing away the first input. The question is how to force it to only ever open the file dialogue once.
The relevant code:
<!-- Table Buttons -->
<div class="container dashboard__table__action-items-container" ng-if="user.Welcomed">
<button class="btn btn-primary" ngf-select="onFileSelect($files)" ngf-multiple="true" style="margin-right: 15px;">
<i class="fa fa-cloud-upload fa-3" style="margin-right: 4px"></i> Upload Meeting
</button>
...
</div>
Edit:
I tested this behavoir with several browsers and it doesn't happen (firefox, safari, opera). This only happens on chrome. Version for ng-file-upload is 12.2.9, chrome Version 52.0.2743.116.
So I ended up "solving" this by hacking around it, but I still think it is a bug with chrome and/or ng-file-select. For posterity, if you wrap the button in a div that has the ngf-select, you can manually debounce the event propagation.
Relevant code:
html:
<div ngf-select="onFileSelect($files)" ngf-multiple="true" style="width: 0;">
<button class="btn btn-primary" ng-click="debounceMeetingCreation($event)" style="margin-right: 15px;">
<i class="fa fa-cloud-upload fa-3" style="margin-right: 4px"></i> Upload Meeting
</button>
</div>
in the controller:
var meetingCreationClicked;
$scope.debounceMeetingCreation = function ($event) {
if (meetingCreationClicked) {
$event.preventDefault();
$event.stopPropagation();
return false;
}
meetingCreationClicked = true;
$timeout(function(){
meetingCreationClicked = false;
}, 1000);
};
Related
I'm using angular-ui-router-uib-modal and I have a question on it.
When I close my modal (which confirm a successfull/failed operation), I need to reload page below (that show a list of data). As shown in the example below, I can specify that behavior in 'Close' button and also in 'X symbol' to close modal (with the ui-sref-opts="{reload: true}").
But... How can I specify the same operation when a user clicks outisde the modal and automatically closes the modal itself?
<div class="modal-content">
<div class="modal-header">
<div class="bb8-modal-close" ui-sref="home.gestioneFondi({gestione:true, innescatoDaMenuLaterale:false})" ui-sref-opts="{reload: true}">
<span class="visuallyhidden glyphicon glyphicon-remove-circle"/>
</div>
<h4 class="modal-title modal-title-font">Info</h4>
</div>
<div class="modal-body" ng-switch="esito">
<p class="text-center modal-body-font" ng-switch-when="true">Success</p>
<p class="text-center modal-body-font" ng-switch-when="false">Error</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ui-sref="home.gestioneFondi({gestione:true, innescatoDaMenuLaterale:false})" ui-sref-opts="{reload: true}">Chiudi</button>
</div>
</div>
Thank you for any help
So when you open a modal like this it is returning the promise:
var modalInstance = $modal.open({..});
you can specify the modal closing event on the promise
modalInstance.result.then(function (result) {..});
You can specify below code to reload the state.
$state.reload();
For above to work, you have to inject $state dependency in your controller.
app.controller('controller', ['$state',function($state){..}])
I'm using Angular Bootstrap and want to have my tooltips trigger using a "hover" on desktop and "click" on mobile devices which can't hover but also have the tooltips close if you click outside the tooltip. I set it to tooltip-trigger="hover outsideClick" since "outsideClick" is now a supported trigger (https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs), however this breaks the tooltip completely so even the hover doesn't work.
<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span>
Is there any way to make these work together?
If I just use tooltip-trigger="hover click" it's decent, but on mobile I can only close the tooltip by clicking the item again, versus being able to click elsewhere on the page to close it.
Have you tried tooltip-trigger="mouseenter outsideClick"?
It seems likehover is not mentioned in the doc.
I think what you're looking for is the tooltip-trigger="hover focus", the focus will act as the outsideClick, closing the tooltip on the next click that the user makes. I've personally used this and it works great both for mobile and desktop.
It actually defaults to hover focus so you shouldn't even have to add them manually.
If there is any chance you can use the native bootstrap library? As it supports what you are looking for by default.
I have created a jsfiddle demonstrating this(please view it on your mobile device to see the tootlips working as expected)
HTML:
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</div>
JS:
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
You can read up on it here, as a side note, you have to manually enable the tooltip
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
I have this popover with template
<i class="fa fa-link" popover-placement="right" uib-popover-template="'newReferenceTemplate.html'" popover-title="New link"> Add new external reference </i>
So when I click on that link icon, a popover opens witht this tamplate
<script type="text/ng-template" id="newReferenceTemplate.html">
<label>Title</label> <br>
<input ng-model="link.Title"> <br>
<label>Url</label> <br>
<input ng-model="link.Url"><br>
<i class="fa fa-floppy-o" > Save </i>
</script>
When I press that 'floppy' icon, I'd like to close the popover. Are there any ways of doing this?
All I can find on documentation is the popover-is-open value, but I don't know if I can use this somehow, any thoughts?
Step 1 : Add popover-is-open="isOpen" to the trigger link.
<i class="fa fa-link add-link"
popover-placement="right"
uib-popover-template="'newReferenceTemplate.html'"
popover-is-open="isOpen"
popover-title="New link"> Add new external reference </i>
Step 2 : When you click the floppy icon inside the popover, set isOpen to false:
This is the save icon of the popover:
<i class="fa fa-floppy-o" ng-click="save()"> Save </i>
This is in the controller:
$scope.save = function () {
$scope.isOpen = false;
};
See plunker
What had worked for me (in an angularJs app) is using
popover-trigger="'outsideClick'"
be aware to use it as it is, means, hard copy of string
"'outsideClick'".
If u don't use angularJs, u can just write:
popover-trigger="outsideClick"
Example:
<div uib-popover-template="'ApproveReject.html'"
popover-trigger="'outsideClick'"
popover-placement="bottom-right"
ng-click="onSubmitOrderStatus('date',$event);approveDates('date')">
Approve
</div>
I have inherited a GUI written with Angular, and at the moment I don't even know enough to trim it down to a fiddle. So I'm hoping this is more straightforward than it appeared on a quick Google.
I have a modal dialog created using Bootstrap that is basically the same as the live demo here: http://getbootstrap.com/javascript/
A copy of the source from that link:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The main difference in my case is that the "Save Changes" button is actually a link - to a resource which is downloaded without leaving the page. It looks like this:
<a ng-href="{{downloadUrl}}" class="btn btn-primary">Download</a>
My goal is to have the above modal dialog dismissed when the link is clicked, while still downloading the file. If I use data-dismiss, the download doesn't happen.
If I need to go digging around the code, that's fine, but I'm hoping there's a simple change to the template that will do the trick. Any suggestions?
First, when using with AngularJS 1.x, always use Bootstrap UI.
When using Bootstrap UI's $uibModal, it is way easier to manipulate the modal, and pass data between the view and the modal. The reason the link does not work, is because the modal should be closed first.
You can create a simple function which replaces href or ng-href: It closes the modal first, and goes to the link second.
And, remember, please do not use jQuery, and always try to use AngularJS dependencies like $window instead of window, when they're available. This also goes for onclick. always use ng-click, and handle the logic in your controller.
In your template, add the controller, and an ng-click-attribute:
<div ng-controller="MyCtrl as $ctrl">
<a href target="_blank" class="btn btn-primary" ng-click="$ctrl.go('#/some/url')"> Go </a>
</div>
In your controller, add the logic, for closing the modal, and following the link:
app.controller('MyCtrl', function($uibModalStack, $window) {
this.go = function(path) {
$uibModalStack.dismissAll();
$window.location.href = path;
}
})
You have to close the modal yourself. Here is a bootstrap.js only solution without angular. In angular you would open the modal with angular-bootstrap and close it also that way.
<a ng-href="some-reosource-url" target="_blank" class="btn btn-primary" onClick="closeModal()">Download</a>
function closeModal() {
$('#myModal').modal('hide');
}
http://plnkr.co/edit/0sRb5VdT9isEFdJ66Rxe?p=preview
Here's a working Plunker.
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.hideAndDownload = function() {
$('#myModal').modal('hide');
var link = document.createElement("a");
link.download = "data:text/html";
link.href = "http://code.jquery.com/jquery-1.11.3.min.js";
link.click();
}
});
Markup
<button type="button" class="btn btn-primary" ng-click="hideAndDownload()">Save changes</button>
I'm creating a web app using AngularJS + Twitter Bootstrap and Bootstrap-UI. When I place a tooltip on a button, it shows as expected; but if the button gets disabled (by the underlying controller) after being clicked, and the tooltip was being shown, the tooltip is not hidden and stays there forever. Here's a repro:
Plunker: http://embed.plnkr.co/numlaAuLOxh3a03Z7O85/preview
Just hover the button to make the tooltip appear, and then click it. The button is disabled, and the tooltip stays there. How can I avoid this behavior and have my tips correctly hidden?
I found that using simply replacing buttons with anchor tags worked perfectly for me.
<a role="button" type="button" class="btn btn-danger"
ng-click="someAction()" tooltip="Tooltip" ng-disabled="isDisabled">
<span class="glyphicon glyphicon-minus"></span>
</a>
Searching through GitHub issues I found the suggestion (seems to be related to the issue opened by you?) to use wrapping element that has a tooltip around the element: http://jsfiddle.net/RWZmu/
<div style="display: inline-block;" tooltip="My Tooltip">
<button class="navbar-btn btn-danger" ng-click="test()" ng-disabled="isDisabled" tooltip="Here's the tip">
<i class="glyphicon glyphicon-forward"></i>
</button>
</div>
Use the following logic here
HTML
<div ng-app="someApp" ng-controller="MainCtrl"
class="likes" tooltip="show favorites" tooltip-trigger="mouseenter"
ng-click="doSomething()">{{likes}}</div>
JS
var app = angular.module('someApp', ['ui.bootstrap']);
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'hideonclick': 'click'
});
}]);
app.controller('MainCtrl', function ($scope) {
$scope.likes = 999;
$scope.doSomething = function(){
//hide the tooltip
$scope.tt_isOpen = false;
};
})
Souce
Hide angular-ui tooltip on custom event
http://jsfiddle.net/3ywMd/10/