I am using angular 1.3 with strap modal dialog and the form inside it.
There are 2 buttons: OK and Cancel.
Cancel works as expected - it closes the modal.
But on OK the dialog is not closed; however, the form is processed as expected.
The code below shows the model and the code which instantiates the modal dialog.
I am using button type=submit on OK to process the form.
The $modal.showTemplate has 2 parameters:
1) HTML (code below)
2) callback which shall know which button was used: OK or Cancel.
For some reason, this callback is invoked only on Cancel.
I tried to fix it by using ng-click="$close(true) on OK button
instead type=submit but it does not help.
Question: how to close the modal dialog on OK?
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog ">
<div class="modal-content">
<div ng-controller="externalController">
<form
role="form"
name="detailForm"
ng-submit="submit()"
>
<div ng-controller="internalController">
... some form fields are here ...
<button class="btn" ng-click="$close(false)">
Cancel
</button>
<button class="btn" type="submit">
OK
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- invoking the modal defined above: -->
$modal.showTemplate(htmlTemplate,
function(confirm) {
console.log("callback confirm="+confirm);
if (confirm === true) {
console.log(" this point never achieved ... and modal dialog is not closed");
} else {
console.log(" this works as expected and modal dialog is closed");
}
},
);
Get rid of the submit type on your 'OK' button. Attach the ng-click directive to this same 'OK' button. On click your button will submit the form via '[externalController].submit()'. If submit() returns a promise then wait for it, otherwise then call the modal controllers 'close()';
<button class="btn" ng-click="functionThatSubmitsAndCloses()">
OK
</button>
And in your 'internal controller' you'll have that function defined on your scope
$scope.functionThatSubmitsAndCloses = function () {
[scope of externalController].submit();
$close(true); // close being defined on the instance of your modal's controller and not this internal controller.
}
Is this an older version of angular strap? I do not see showTemplate defined in their API.
Related
All I want to accomplish is to show a "loading ..." when the submit button is clicked using AngularJS.
I figured that should be quite easy using
<form ng-if="!export.buttonClicked">
... various input values without ng-model
<input type="submit" value="Start export" class="btn btn-default" ng-click="export.buttonClicked=true;">
</form>
<div ng-if="export.buttonClicked">
loading...
</div>
How could I be so wrong. Seems like Angular prevents the default form submission like this. Showing the loading div works quite fine, but I need the form to be submitted (The server has to calculate a lot so it responds slowly and I would like to show loading... instead of the Button once it has been clicked)
I can't use ng-submit because I have to combine AngularJS with Razor and I don't want no ng-form or ng-model...
Any ideas?
If you have an angular controller tied to the page or div, just use a function in your ng-click like this:
<div ng-controller="sampleController" style="text-align:center">
<button ng-click="buttonClickedFunction()">Submit</button>
<p>{{message}}</p>
</div>
Then in your controller:
yourAppName.controller('sampleController', function($scope) {
$scope.buttonClickedFunction = function() {
$scope.message = "Loading...";
// Whatever else you wish to do with your button/function.
};
});
This puts loading on the screen once button is clicked, if this is what you were shooting to do?
I am trying to create an xeditable form as demonstrated here: https://vitalets.github.io/angular-xeditable/#editable-form.
I have followed the instructions exactly but my form is not working. I want to save a resource, but when I click the Edit button, which should display the form, it seems to skip the editing stage and immediately triggers the saveResource function - which should only happen when the form gets saved.
I've compared my code to the documentation again and again and can't work out what I am doing wrong.
HTML
<form editable-form name="editResourceForm" onaftersave="saveResource()">
<p>
<strong editable-text="resource.title" e-name="title">
{{resource.title}}
</strong>
</p>
<div class="col-xs-12 col-sm-4">
<button ng-click="editResourceForm.$show()" ng-show="!editResourceForm.$visible">Edit</button>
<!-- buttons to submit / cancel form -->
<span ng-show="editResourceForm.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="editResourceForm.$waiting">Save</button>
<button type="button" class="btn btn-default" ng-disabled="editResourceForm.$waiting" ng-click="editResourceForm.$cancel()">Cancel</button>
</span>
</div>
</form>
JS
app.controller('Ctrl', function($scope, $filter) {
$scope.resource = {
title: 'awesome resource'
};
$scope.saveResource = function() {
console.log("Save resource");
}
});
JSFIDDLE HERE
You can see that it is trying to save the form, because every time the Edit button is clicked, the console logs "Save resource". This should not happen when the edit button is clicked.
#ckosloski answered this on Github:
I think it's because your edit button does not specify a button type.
By default, the button type is submit. So you are clicking on the
button and it's submitting the form since it's a submit button. Try
adding type="button" to your edit button.
Adding this solved it, as you can see from the updated JSFiddle.
I am using the angular-bootstrap in AngularJS, because I want to use dialogs. In my HTML I have the following code:
<script type="text/ng-template" id="create.html">
<div class="modal-header">
<h3 class="modal-title">Welcome!</h3>
</div>
<div class="modal-body">
<p>Hi</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
</div>
The modal dialog shows up, but nothing happen when I click on the "OK" button.
There is also no error in the console. When I create a button and place it outside the script, then it works. But I need to use the button in the modal dialog.
I have created a factory for the modal dialog, because I want to use it in my controller. Here the function what works fine:
$scope.createGame = function(data){
// Open the modal dialog
ModalFactory.open();
}
Now the modal dialog shows up and the button "OK" appears. When I click on "OK" nothing happen. This is the function I have created for the "OK" button.
$scope.ok = function(data){
// Close the modal dialog
alert("Test");
}
But the triggering of ng-click in that script what you see above doesn't work...
Your function requires a parameter "data" but you are not passing it.
<button class="btn btn-primary" ng-click="ok()">OK</button>
Either Change your function signature like this,
$scope.ok = function(){
// Close the modal dialog
alert("Test");
}
Or Pass the data.
It's always use a different function name rather than just "ok"
I've noticed that in the ionic todo app example the stale/old todo information remains on the modal if I cancel the modal and open it back up again. What's the best place to clear/reset the old modal data so that it always has fresh blank fields after I cancel or submit the modal form fields?
Should I null or clear the task object somehwere? Reset the fields manually on close and create? Add a handler to some sort of on hide event?
Here's the angular/ionic example:
http://ionicframework.com/docs/guide/building.html
and a relevant snippet of code
// Called when the form is submitted
$scope.createTask = function(task) {
$scope.tasks.push({
title: task.title
});
$scope.taskModal.hide();
task.title = "";
};
// Open our new task modal
$scope.newTask = function() {
$scope.taskModal.show();
};
// Close the new task modal
$scope.closeNewTask = function() {
$scope.taskModal.hide();
};
and the modal
<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.title">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>
</ion-content>
I've had the same problem. I first tried to clear my form data by clearing the model-object upon closing my modal window, just like you, but that only worked for when I submitted the form, it seems. When cancelling, it doesn't work! (Even if you explicitly clear the object before hiding the popup, it will not work)
I eventually fixed it by doing this:
$scope.newTask = function() {
$scope.task = {};
$scope.taskModal.show();
};
This way, every time the window is loaded, you clear the model. So the trick is not to do it when submitting data, but when opening the modal window. That did it for me at least.
Btw, I also needed an edit function for this same modal window, so I do this:
$scope.editTask = function(task) {
$scope.task = task;
$scope.taskModal.show();
};
The accepted answer is definitely correct but there is another way to achieve the same goal.
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
$scope.task = {};
});
I'm using AngularStrap with bootstrap.
I have a modal dialog that uses it's own controller. How can I close the modal using this local controller?
I instantiate the controller on a button like this:
<button type="button"
class="btn btn-success btn-lg"
bs-modal="modal"
data-template="user-login-modal.html"
data-container="body"
ng-controller="userLoginController"
>Click here to log in</button>
and the userLoginController has this:
$scope.authenticate = function(){
this.hide(); // this doesn't work
}
This is obviously just a demo, I want it to close on successful login, but this is where the code I'd use to close it would go.
I've tried instantiating the modal programmatically (use the $modal service to create the modal) but I haven't been able to figure out how to inject the controller through that method.
If I were to do something like emit an event from the modal using the bs-modal directive, how can I reference the modal to close it?
here's my plnkr:
http://plnkr.co/edit/m5gT1HiOl1X9poicWIEi?p=preview
When in the on-click function do
$scope.myClickEvent = function () {
this.$hide();
}
Figured out a good method:
I moved the ng-controller to the TEMPLATE and instantiate the modal using the provided modal service. I then use a rootscope broad cast to let everyone know that someone successfully logged in.
new controller code:
var loginModal = $modal({template:'/template.html', show:false});
$scope.showLogin = function(){
loginModal.$promise.then(loginModal.show);
}
$scope.$on("login", function(){
loginModal.$promise.then(loginModal.hide);
});
the button just looks like this now:
<button type="button"
class="btn btn-success btn-lg"
ng-click="showLogin()"
>Click here to log in</button>
and my template has the old ng-controller in the first tag.
I am probably too late, but just wish to share my answer. If all you need is hiding the modal after form success, then bind that $hide function to one of controller varriable.
<div class="modal" data-ng-controller="Controller" data-ng-init="bindHideModalFunction($hide)">
In the controller:
// Bind the hiding modal function to controller and call it when form is success
$scope.hideModal;
$scope.bindHideModalFunction =function(hideModalFunction){
$scope.hideModal = hideModalFunction;
}
I found all of the above answers way too complicated for your use case (and mine when I ran into this problem).
All you need to do, is chain the ng-click to use the built in $hide() function that angular strap bundles.
So your ng-click would look like: ng-click="authenticate();$hide()"
Using Angular and bootstrap if you want to submit data to controller then have the modal close just simply add onclick="$('.modal').modal('hide')" line to the submit button. This way it will hit the controller and close the modal. If you use data-dismiss="modal" in the button submit never hits the controller. At least for me it didn't. And this is not to say my method is a best practice but a quick one liner to get data to at least submit and close out the modal.
<div class="modal fade" id="myModal" ng-controller="SubmitCtrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form ng-submit="submit()">
<input type="text" ng-model="name" />
<button type="submit" onclick="$('.modal').modal('hide')">Submit</button>
</form>
</div>
</div>
</div>
</div>
Perhaps open it with the service on click and have it close itself on the $destroy event?
$scope.openModal = function()
{
$scope.modal = $modal({
template: "user-login-modal.html",
container="body"
});
}
$scope.$on("$destroy", function()
{
if ($scope.modal)
{
$scope.modal.hide();
}
});