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.
Related
I have a requirement as, Creating a one form and load this form on multiple screen as modal using bootstrap.
Example : Suppose I am having 3 jsp pages i.e. Index.jsp, Request.JSP, Form.jsp
Now I have a link on Index.jsp which will display Form.jsp as Modal and I have button on Request.jsp, on click of button Form.jsp will get displayed as modal.
I have gone through multiple queries but solution was not satisfactory. I dont want to repeat the code and want to use Modal.
Thanks in advance.
i got the solution. I kept the Modal and Modal-dialog class div tags in main JSP like below :
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cash Request Form</h4>
</div>
<div id="loadModalBody" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then I added the form with modal-body class in second JSP CashRequestForm.jsp :
<div class="modal-body panel">
<div class="panel panel-body" id="panelActTypeAndDate">
<div class="row">
<div class="col-md-8"><font>Activity Type</font></div>
<div class="col-md-3"><font>Select Activity Date</font></div>
</div>
<div id="row1" class="row">
.....
.....
Your code
</div>
</div>
</div>
Then I called .load using jquery as below :
$(".popUp").click(function () {
$("#loadModalBody").load("CashRequestForm.jsp");
});
And it worked for me.
The bellow modal is inside a ng-controller="myController as SignupCtrl"
<div id="modalSignup" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ng-click="SignupCtrl.resetForm()">
X
</button>
</div>
<div class="modal-body">
<form name="formSignup" novalidate>
<button type="submit" ng-click="LoginCtrl.signup();">
submit
</button>
</form>
</div>
</div>
</div>
</div>
I'm also using ui-router in my project.
How do I write the controller to close the modal and change state after success on LoginCtrl.signup() ?
You have to use Bootstrap's JS methods to close the modal manually.
But you are mixing jQuery and AngularJS. You should use a 3rd party library to do this.
See UI Bootstrap.
I have a modal window containing the 'close' button, I need to close the browser once i click on the close button. how do i achieve using angular js.
I tried using $window service but no luck.
<div class="modal" id="alertModal" data-keyboard="true" role="dialog" tabindex="-1">
<div class="modal-dialog text-left" style="width:40%">
<div class="modal-content">
<div class="modal-header">
<h3>{{title}}</h3>
</div>
<div class="modal-body">
<div class="alert-danger" style="padding:10px; font-size:13px"><span ng-bind-html="content"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="closeBrowser();">Close</button>
</div>
</div>
</div>
</div>
controller
$scope.closeBrowser = function(){
$window.close();
}
try this:
function closeWindow() {
window.open('','_parent','');
window.close();
}
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'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!