<div ui-modal class="fade" ng-model="campaignSettings" data-backdrop="static" data-keyboard="false">
<div class="modal-header">
<a class="close" ng-click="campaignSettings=false">x</a>
<h3>Link Settings</h3>
</div>
<div class="modal-body">
text
</div>
<div class="modal-footer">
<a class="btn btn-default" ng-click="campaignSettings=false">Close</a>
</div>
</div>
by using angular + bootstrap2
now this ui-model is not working with bootstrap3
any solution ?
There's a branch with templates for Bootstrap 3:
https://github.com/angular-ui/bootstrap/tree/bootstrap3
You can use those; see a basic demo.
Related
I have to remove the image from the list in the conformation model click on the YES button but after 2nd time model is not open.In the element section after 2nd time click "
<span class="glyphicon glyphicon-remove-sign" data-toggle="modal" data-target="#openImage"></span>
<div id="openImage" class="modal in">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Are you sure???</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this product?</p>
<div class="row">
<div class="col-12-xs text-center">
<button class="btn btn-primary btn-md" ng-click="removeSelectedProductKey($event, productObject.keyId)"> Yes</button>
<button class="btn btn-default btn-md" data-dismiss="close">No</button>
</div>
</div>
</div>
</div>
</div>
</div>
display :none" is apply tell me sir how to resolve this problem?
Try to open your modal by function using:
<span class="glyphicon glyphicon-remove-sign" ng-click="openImg()"></span>
And inside your controller write below function:
function openImg(){
angular.element('#openImage').modal();
}
I have a functional angular-strap aside with a custom template.
In my template are anchor tags. When you click one of these tags, it closes the aside.
How can I prevent the aside from closing?
Thanks!
Here is my template:
<script type="text/ng-template" id="chart-edit-aside">
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header" ng-show="title">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title" ng-bind="title"></h4>
</div>
<div class="aside-body">
<div ng-repeat="chart in availablecharts">
<a ng-click="loadChartPreview(chart);" href>{{chart.metric_label}}</a>
</div>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-primary-mp" ng-click="saveChart()">Save</button>
<button type="button" class="btn btn-secondary-mp" ng-click="$hide()">Cancel</button>
</div>
</div>
</div>
</div>
Turns out my function call on the click event was causing it, when I commented out the body of that func, the aside did not close. So this is not an issue with aside.
I am trying to implement Bootstrap Modal from http://angular-ui.github.io/bootstrap/ (pls. search for Modal). The templateUrl refers to myModalContent.html. But, I could not find this file. Can someone shed some light on this file?
Thanks in advance!
It is a template written in a script tag
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
I'm starting with AngularJS and I'm having some issues with routes.
I configured my project for html5mode, I set my tag, and everything was ok.
The problem comes when I try to use a bootstrap modal. The link that fires the modal is:
<a data-toggle="modal" href="#upload-files" >Upload files</a>
The modal code is:
<div class="modal hidden" id="upload-memories">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Upload memories</h4>
</div>
<div class="modal-body">
asdadsd
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
</div>
So the href in the anchor references the modal's id, not a route. But my application is going to home page (because the 'otherwise' I suppose).
Can I say AngularJS to ignore this? or is there a better solution?.
Thank you very much!
I am using rails to build my app. Tried to popup a modal box with angularstrap http://mgcrea.github.io/angular-strap/#/modal they are giving example of using modal box with partials.But I want to call a div from same page.they mention something with ng-template.But I didn't get any documentation for that. Anybody know about this??
You can read about ng-template here in the AngularJS docs. Implement it as follows:
<script type="text/ng-template" id="modal-template.html">
<div>Content of Modal</div>
</script>
Then where you're calling the modal, replace the reference to the partial with modal-template.html:
<button data-toggle="modal" bs-modal="'modal-template.html'">Call to Action</button>
In the main html page define your TemplageCache as follows:
<script type="text/ng-template" class="modal" id="/myTmpl.html">
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" ng-click="$hide()">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">This title</h4>
</div>
<div class="modal-body">
This is content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
</script>
Then in javascript
$scope.showMyModal=function(){
var myModal = $modal({placement:'center', animation:"am-fade-and-scale", templateUrl:'/myTmpl.html', show: true});
}
An ng-template would be if you had a inline (html string in javascript) variable. For example:
var t = "<div></div>";
t could be your ng-template.
Unforunately I don't know how to do what you are looking for.