I'm simply trying to set up a warning dialog, and trying out Bootstrap modal for starters.
Bootstrap modal: http://getbootstrap.com/javascript/#modals
The modal fires but it does NOT show my modalTitle and modalBody values !
HTML snippet here (note the vm.modalTitle and vm.modalBody scope vars) -
<!-- Bootstrap Modal Dialog Template-->
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel"><span ng-model="vm.modalTitle"></span></h4>
</div>
<div class="modal-body"><span ng-model="vm.modalBody"></span></div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
and my controller code :
vm.modalTitle = ''; vars initialized at the top of my controller
vm.modalBody = '';
...
function sendRequest(){
if (data.status == 'FAIL') {
if (data.messages.length > 0) {
logErr("Error submitting aggregation request: " + data.messages[0]);
vm.modalTitle = "Error submitting aggregation query !";
vm.modalBody = data.messages[0];
$('#myModal').modal('toggle');
$('#myModal').on('hide.bs.modal', function (e) {
// fired when modal is hidden from user
})
return;
}
}
}
The modal fires but it does NOT show my modalTitle and modalBody values !
I tried this route when I first learned Angular and very quickly got frustrated with the hacks that I had to do to get it to work. Your best bet is to use the AngularUI modal. It wraps the Bootstrap modal very nicely. http://angular-ui.github.io/bootstrap/.
Related
I'm having some controllers, both of them also have a delete function trigger by the ng-click and when delete function is called, i'll show a js confirm dialog to alert user about the object they're going to delete.
But now, i want to use the bootstrap instead of js confirm dialog for alert user, and all of delete function when called will use the same modal to alert, but the content of modal will be change by the delete function called. So can i make that with only 1 modal?
<div id="modal_alert_dialog" class="modal fade modalAlert" tabindex="-1" role="dialog" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<span class="close" data-dismiss="modal" aria-label="Close">x</span>
<h3 style="text-align:left;">Notice!</h3>
<p class="text-left">Are you sure you want to delete {{object_name}}</p>// object_name variable is the name of object that user chosen to delete.
<div class="text-right">
<button type="button" class="close btn" data-dismiss="modal" aria-label="Close">Cancel</button>
<button class="btn" ng-click="dynamicDeleteFunction">OK</button>//dynamicDeleteFunction is the fuction which user choose as a confirm "yes"
</div>
</div>
</div>
</div>
</div>
app.controller('userController', function ($scope){
$scope.deleteUser = function () {
$scope.object_name = "user 'ABC'";
//Maybe a function or something trigger the modal show up
if (confirmed){
//execute delete....
}
}
});
app.controller('productController', function ($scope){
$scope.deleteProduct = function () {
$scope.object_name = "product 'ABC-111'";
//Maybe a function or something trigger the modal show up
if (confirmed){
//execute delete....
}
}
});
app.controller('categoryController', function ($scope){
$scope.object_name = "category 'CatI'";
//Maybe a function or something trigger the modal show up
if (confirmed){
//execute delete....
}
});
I'm using Bootstrap in conjunction with AngularJS to open modal dialogs. To activate a modal without writing JavaScript code, I use the data attributes as described in the documentation. This is a very convenient way, since I do not need to show/hide the dialog manually.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Now I would like to call a method when the modal dialog is closed. With an explicit close button, this is no problem. However, when the user clicks outside of the dialog or presses the Esc key, I cannot trigger any function explicitly.
I know that I can use jQuery or Angular's $uibModal to listen for a dismiss event, but this makes the entire project more complex. I'd rather have it all in one place. I do not want to mix things up, so using jQuery within my AngularJS project is not an option. The solution I'm stuck with right now, is using $uibModal to open() the dialog manually and catching the result to handle user-invoked dismiss.
My question:
How can I call a function when a modal dialog is closed without introducing too much clutter?
What I have in mind looks like this (imaginary data-dismiss-callback):
<button type="button" data-toggle="modal"
data-target="#myModal"
data-dismiss-callback="handleCloseEvent()">Launch modal</button>
As we want to attach a specified behavior (custom callback) to the target modal using the button that opens it, then directive is the best candidate who can help us with achieving this.
We will be listening to show.bs.modal and hide.bs.modal/hidden.bs.modal events: the first one will help us to determine if the modal was opened using the corresponding button and the second one is the place where we want to call the passed callback function.
Here is a working example of modalDismissCallback directive (due to normalization, we can't name it dataDismissCallback):
angular.module('myDemoApp', [])
.controller('myCtrl', [function () {
var ctrl = this;
ctrl.testVar = 2;
ctrl.onModalDismiss = onModalDismiss;
function onModalDismiss(a, e) {
console.log(arguments);
}
return ctrl;
}])
.directive('modalDismissCallback', [function modalDismissCallback() {
return {
restrict: 'A',
scope: {
modalDismissCallback: '&'
},
link: function (scope, element) {
var modal = angular.element(element.data('target'));
modal.on('show.bs.modal', onShow);
modal.on('hide.bs.modal', onHide);
scope.$on('$destroy', function () {
modal.off('show.bs.modal', onShow);
modal.off('hide.bs.modal', onHide);
});
var shouldCall = false;
function onShow(e) {
shouldCall = e.relatedTarget === element[0];
}
function onHide(e) {
if (angular.isFunction(scope.modalDismissCallback) && shouldCall) {
scope.$event = e;
scope.$applyAsync(function () {
scope.modalDismissCallback.apply(this, arguments);
});
}
}
}
}
}]);
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<body ng-app="myDemoApp">
<div ng-controller="myCtrl as $ctrl">
<button type="button" class="btn btn-default"
data-toggle="modal"
data-target="#myModal"
modal-dismiss-callback="$ctrl.onModalDismiss($ctrl.testVar, $event)">Launch modal
</button>
<button type="button" class="btn btn-default"
data-toggle="modal"
data-target="#myModal">Launch modal wo callback
</button>
<div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog"
aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div ng-include="'template.html'"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="template.html"><h5>Hello from ng-template!</h5></script>
</body>
<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.slim.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
I am trying to do an update of a form and all is working fine but the modal does not close properly when the update is done. I mean the modal did disappear, but the screen is still dark like the modal is still there and I can't click on anything else. How do I get the page to refresh and the modal to close properly ?
My code is as shown:
$scope.updateStudentParticulars = function(item) {
var currentDate = $filter('date')(new Date(), 'dd/MM/yyyy'); //for lastchangepassword field
$scope.EditStudentForm = false;
//alert(item.User_Key + " USER KEY")
const rootRef = firebase.database().ref();
//zoom in to users table
const ref = rootRef.child('Users');
ref.child(item.User_Key).update({
name: item.Student_Name,
email: item.Student_Email,
role: "student",
accountStatus: "Activated",
yearJoined: item.Year_Joined,
password: item.Password,
passwordChangedDate: currentDate,
gpa: 0.00,
profile: {
address: item.Address,
citizenship: item.Citizenship,
gender: item.Gender,
nok: item.Nok,
nokPhone: item.Nok_Phone,
phone: item.Phone
}
});
alert("Update Successful !")
$route.reload();
}
The modal code is declared in a html file:
<div id="editModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Student Particulars</h4>
</div>
<div class="modal-body">
<div ng-include src="'templates/editStudentForm.html'"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It looks like you are using bootstrap modals. Once you've included the bootstrap JS code, you can call:
$('#editModal').modal('hide');
See http://getbootstrap.com/javascript/
Hi guys i want to show and hide div on modal-popup in angularjs(bootstrap3.3) following is the code i have written , on page load the required myModal_username1is displayed but on click of submit when the controller function is called the myModal_username1 is supposed to be visiblely false and other div should be visibly true.. but same is not happeing.
Controller Code:
angular.module('ratefastApp')
.controller('LoginCtrl', function ($scope, Auth, $location) {
$scope.showUser = 'true';
$scope.x= function(form) {
$scope.showPass = 'false';
}}
view :
<div class="modal fade" id="myModal_username" 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Forgot your Username ?</h4>
</div>
<!-- div check -->
<div ng-show="showUser" id="myModal_username1" class="modal-body"
ng-include src="'views/partials/forgotstage_username.html'">
</div>
<!-- div question -->
<div ng-hide="showUser" id="myModal_username2" class="modal-body"
ng-include src="'views/partials/forgot_username.html'">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The x() function (whose name is really awful, BTW) doesn't change the value of showUser, which is used by the view. It initializes a new scope field named showPass:
$scope.showPass = 'false';
Also, ng-include has its own scope, inheriting from the controller scope. Setting a field in this child scope will thus add the field to the child scope, but won't change the value of the field in the controller scope.
You also shouldn't use strings for booleans. Use true and false, not 'true' and 'false'.
So the code should be:
$scope.visibility = {
showUser: true
}
$scope.submit = function(form) {
$scope.visibility.showUser = false;
}
I have an ember application with two models, user and subject. Each user has a number of subjects associated with them. I have a user/create template in which you can input a new users details, ie their name, email address and associated subjects. The subjects are selected from a list of checkbox values, driven by the subjects in the subject controller. My problem is that when I click on save, the controller seems to skip over the subject selection and doesn't add them to the JSON payload. Can anyone help?
Create Template:
<script type = "text/x-handlebars" id = "user/create">
<div class="modal fade" id="createModal" 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-hidden="true">×</button>
<h4 class="modal-title">New User</h4>
</div>
<div class="modal-body">
<div class = "input-group">
<form>
<h5>First Name</h5>
{{input value=firstName}}
<h5>Last Name</h5>
{{input value=lastName}}
<h5>Email</h5>
{{input value=email}}
<h5>Subjects</h5>
{{#each subject in subjects}}
<label>
{{view Ember.Checkbox Binding="id"}}
{{subject.name}}
</label><br />
{{/each}}
</form>
</div>
</div>
<div class="modal-footer">
<a {{action close target="view"}} href="#" class="btn btn-default">Cancel</a>
<a data-dismiss="modal" {{action "save"}} class="btn btn-primary">Save changes</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</script>
UserCreateView:
App.UserCreateView = Ember.View.extend({
didInsertElement:function(){
$('#createModal').modal('show');
var self = this;
$('#createModal').on('hidden.bs.modal', function (e) {
self.controller.transitionToRoute("users");
});
},
actions:{
close:function(){
this.$(".close").click();
},
save: function(){
alert('(in view) saved in view');
this.controller.send("save");
self.controller.transitionToRoute("users");
this.$(".close").click();
$('#createModal').modal('hide');
}
},
)};
CreateController:
App.UsersCreateController = Ember.ObjectController.extend({
subjects: function() {
return this.store.find('subject');
}.property(),
actions: {
save: function(){
alert('(UsersCreateController) SENDING A POST REQUEST');
var newUser = this.store.createRecord('user', this.get('model'));
console.log("newUser", newUser);
newUser.save();
this.transitionToRoute('users');
$('#createModal').modal('hide');
}
}
});
The first thing I would look at is the binding attribute you are using on your checkbox(es). For non-checkbox or {{input}} you bind via the value attribute. BUT - for checkboxes you must bind on the "checked" attribute.
Take a look at http://emberjs.com/guides/templates/input-helpers/ - about halfway down under Checkboxes for more info, it will show the accepted attributes, etc.
I experienced the same issue wherein this:
{{input type="checkbox" class="input-small" id="inputCache" value=cache}}
did not work with regard to passing in the checkbox-values to the action handling the submit (other values were passed in and persisted fine), whereas simply changing the attribute to this:
{{input type="checkbox" class="input-small" id="inputCache" checked=cache}}
solved the entire problem.
Hopefully this will do the trick. Good luck :-)