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!
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 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 just pulled some code that I had worked on a few months back using angular and bootstrap or more specifically that uses modals. Apparently modals have changed quite a bit.
My code:
<div class="modal" ng-show="isDocPopupVisible">
<div class="modal-header">
<button type="button" class="close" ng-click="closeDocPopup()">×</button>
<h3>{{selectedDoc.name}}</h3>
</div>
<div class="modal-body">
<strong>Created Date:</strong> {{selectedDoc.date}} <br />
<br />
<p>
<span style="white-space:pre">{{selectedDoc.description}}</span>
</p>
</div>
<div class="modal-footer">
Download
Close
</div>
</div>
Nothing happens anymore when I click a doc. If I change the class from modal to modal-dialog, the bottom slides down, but I can't get it to be a popout modal anymore. Reviewing bootstrap's docs makes it seem much more intense than it used to be, which I guess is fine, but I'm just hoping it's something similar to the btn btn switched to btn btn-primary.
Any help - thanks all.
but I figured it out, just had to switch some things up.
<tr ng-repeat="doc in docs.cast | orderBy:'name' | filter:search" data-toggle="modal" data-target="#docModal" ng-click="showDocPopup(doc)">
<td>{{doc.name}}</td>
<td>{{doc.date}}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="docModal" role="dialog" ng-show="isDocPopupVisible">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ng-click="closeDocPopup()">×</button>
<h3>{{selectedDoc.name}}</h3>
</div>
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.