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.
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();
}
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 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.