I'm trying to use the uib-popover-html directive and it doesn't display. If I use the uib-popover or uib-popover-template directive it displays correctly. Am I missing something?
This works
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'app/login/popover.html',
title: 'Title'
};
<!-- popover.html -->
<div>
<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content
</div>
<!-- /popover.html -->
<button uib-popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>
<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>
This doesn't
<button uib-popover-html="htmlPopover" class="btn btn-default">HTML Popover</button>
Try using $sce (Strict Contextual Escaping) to show that the HTML is safe:
$htmlPopover = $sce.trustAsHtml('<div>Popover Content</div>');
This feature exists to avoid user's from inputting HTML that could be nefarious into a form, etc.
References: https://docs.angularjs.org/api/ng/service/$sce
Related
I am using ngTable with filters.
How can I clear the filters values by clicking on one button?
I thought that $scope.tableParams.reload(); would reset the filters but apparently it's not the case.
Thank you
Like so: $scope.tableParams.filter({});
You can clear the filters supplying an empty object ({}) to the filter() method of tableParams instance.
Look below inside the ng-click directives:
If you are using controller as syntax:
In controller:
this.tableParams = new NgTableParams(tableSettings, tableParams);
In view:
<div ng-controller="demoCtrl as demo">
<button class="btn btn-primary pull-right"
ng-disabled="!demo.tableParams.hasFilter()"
ng-click="demo.tableParams.filter({})">
Clear filters
</button>
</div>
If you are using controller with $scope syntax:
In controller:
$scope.tableParams = new NgTableParams(tableSettings, tableParams);
In view:
<div ng-controller="demoCtrl">
<button class="btn btn-primary pull-right"
ng-disabled="!tableParams.hasFilter()"
ng-click="tableParams.filter({})">
Clear filters
</button>
</div>
I make a simple demo in which I make custom cell of table like that
{
field: 'id',
name: '',
enableColumnMenu: false,
cellTemplate: 'edit-button.html',
width: 34,
enableFiltering: false,
},
I am using angular ui grid from here
http://ui-grid.info/docs/#/tutorial/101_intro
I try to get click event but it not working properly .I try like that
<div class="ui-grid-cell-contents">
<button type="button" class="btn btn-xs btn-primary" ng-click="self.editRow(grid, row)">
<i class="fa fa-edit"></i>
</button>
</div>
I make editRow function in controller .but it not fire why
self.editRow = editRow;
function editRow(grid, row) {
alert('--')
}
I have one more Question why it show error when I include dependency of $uibModal already include angular and ui bootsrap files
here is my code
http://plnkr.co/edit/G6AyH2TPfqOxnyPKx0g1?p=preview
uiGrid binds the parent scope to a scope called "appScope", you can get your functions from there (docs here: http://ui-grid.info/docs/#/tutorial/305_appScope)
<div class="ui-grid-cell-contents">
<button type="button" class="btn btn-xs btn-primary" ng-click="grid.appScope.c.editRow(grid, row)">
<i class="fa fa-edit"></i>
</button>
</div>
plunkr: http://plnkr.co/edit/jSD6G7K3eHiKNignNnoR?p=preview
$uibModal couldn't be found because you're probably still using an older version of ui-bootstrap that still uses the non-prefixed version of the services ($modal)
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 create table using bootstrap and angular use object to display data. I want to open popup window to change object property by clicking row (and use angular binding in modal to work with object).
So my issue that i doesn't understand how to pass object from table to modal.
I found many examples with passing values and changing html on fly but in my case i want to use angular for binding and want to pass reference to object.
Sample of table:
<table class="table table-condensed table-bordered">
<thead>...</thead>
<tbody>
<tr ng-repeat="property in properties" data-toggle="modal" data-id="property" data-target="#editPropertyModal">
<td>{{property.name}}<td/>
<td>{{property.value}}<td/>
<td>...<td/>
</tr>
</tbody>
</table>
So by clicking this row i want to open modal and pass there property object and use controls like input, combobox to bind values via angular.
My sample of modal:
<div class="modal fade" id="editPropertyModal" tabindex="-1" role="dialog" aria-labelledby="editPropertyModalLabel" 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="editPropertyModalLabel">Property details</h4>
</div>
<div class="modal-body">
{{currentProperty.name}} - {{currentProperty.value}}
</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>
My try to pass property via javascript:
$(document).on("click", ".open-editPropertyModal", function (e) {
e.preventDefault();
var _self = $(this);
var property = _self.data('id');
$("#currentProperty").val(property);
$(_self.attr('href')).modal('show');
});
Doesn't work.
You can use this to do that. It really helped me.
Default Bootstrap JavaScript is not working well with angular, because it makes changes in DOM model outside AngularJS. Please consider using native directives for bootstrap, like these http://mgcrea.github.io/angular-strap/
Also, for maximum simplicity, in many cases, you can use something like this plugin https://github.com/cgross/angular-prompt. It depends on bootstrap and gives you simple API based on promises.
prompt({
title: 'Give me a name',
message: 'What would you like to name it?',
input: true,
label: 'Name',
value: 'Current name',
}).then(function(name){
//name contains new value
});
Callback passed to then will be executed after clicking "OK" in popup.