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)
Related
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
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.
In a large form, I'm using popovers to display error messages from the validation (I know, not best practice).
Now, I also want to add tooltips to display detailed explanation of the input.
However, using both, the tooltip and the popover directive (and their associated -trigger and -placement directives), the behavior is odd/buggy: Both, tooltip and popover are placed based on the popover-placement directive (ignoring the tooltip-placement) - and display the text provided for the popover.
<button class="btn btn-default"
popover="Popover" popover-trigger="mouseenter" popover-placement="right"
tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top" >
Label</button>
See this plunkr.
Any idea how to make this work?
They actually infact use the same placement function.
From the docs on popover:
The popover directive also supports various default configurations through the $tooltipProvider. See the tooltip section for more information.
Meaning if you had the following code:
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.options({
'placement': 'right'
});
}]);
It would change the default for both tooltips and popovers.
Best I can think of is it have some sort of wrapper around the element so you can do each in turn.
<button class="btn btn-default sampleBtn"
popover="Popover" popover-trigger="mouseenter" popover-placement="right">
<span tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top">
Tooltip + Popover
</span>
</button>
Demo in Plunker
A very Simple Way..Just Make a parent Span for the button and attach those properties with that Span. I have Some Code for that too
<span title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Some content in Popover on bottom">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</span>
Here is the JS Fiddle for that too
http://jsfiddle.net/h75k1fzj/
The AngularJS ng-click event isn't fired in a Boostrap popover.
<button id="delAnnot" type="button" class="btn btn-default"
data-toggle="popover" data-html="true" data-placement="bottom" data-content="
<button type='button' class='btn btn-danger' ng-click='vm.removeAnnotation(scenevm.sharedService.curAnnotation.ID)'>delete</button>">
<span class="glyphicon glyphicon-trash"></span>
</button>
I initialized my popover with a container so that the popover is within my angular controller:
$(".btn").popover({
placement: 'bottom',
trigger: 'click',
container: '#sceneCtrl'
})
For sure 'ng-lick' is not going to work try 'ng-click'. You can try as well using bootstrap directives http://angular-ui.github.io/bootstrap/ instead doing that in jQuery way.
Regards
Sylwester
Checkout this thread: AngularJS ng-click broken inside a popover
And here is the code that worked for me:
//Initialize & config popover controls
$('[data-toggle="popover"]').popover({ html : true })
.click(function(ev) {
//this is workaround needed in order to make ng-click work inside of popover
$compile($('.popover.in').contents())($scope);
});
And don't forget to include $compile and $scope as dependency in your module.