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 = {};
});
Related
Update
I get it. I just need to put a
$scope.get = {}
outside my save function and change
<button ng-click="save(get)"></button>
to this
<button ng-click="save()"></button>
Thanks to this thread.
I have a simple problem that related to access data from ion-content in the button placed on ion-footer. It returns undefined.
<ion-content>
<input type="text" ng-model="get.name" />
</ion-content>
<ion-footer>
<button ng-click="save(get)"></button>
</ion-footer>
js file
$scope.save = function(get){
alert(get);
}
JS Code
$scope.get = {'Id':1,Name:'Test'};
$scope.save = function (get) {
alert(get.Name);
};
HTML Code
<ion-view>
<ion-content>
<input type="text" ng-model="get.Name"/>
</ion-content>
</ion-view>
<ion-footer>
<button ng-click="save(get)">Save</button>
</ion-footer>
This code will work and alert the Name.
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.
I want to hide thebutton at the begin until I have presses another buttons to make them appear...
My codes are as followed:
The button Controller + javascript:
<div ng-controller="PrintTicket">
<button class="button button-dark" id="btn-printTicket" ng-click="isPrinted()">Print Ticket</button><br></div>
myIonic.controller('PrintTicket',function($scope){
var init_state = false;
$scope.isPrinted = init_state;
$scope.PrintTicket = function(){
$scope.isPrinted = !init_state;
return $scope.isPrinted;
} });
The button to display after click:
<div ng-controller="PrintTicket" ng-show="isPrinted">
<button class="button button-dark" id="ticket1_dark"><b>1234</b></button></div>
May you please kindly give me some advices please. Thank you for your time.
Link to Plunker
<div ng-controller="PrintTicket">
<button class="button button-dark" id="btn-printTicket"
ng-click="isPrinted()">Print Ticket</button><br></div>
<div ng-controller="PrintTicket" ng-show="showPrintButton">
<button class="button button-dark" id="ticket1_dark"><b>1234</b></button></div>
myIonic.controller('PrintTicket',function(`enter code here`$scope){
var init_state = false;
$scope.showPrintButton = false;
$scope.isPrinted=function(){ //$scope.isPrinted is a function
$scope.showPrintButton = true;
}
});
For printing ticket you should call PrintTicket function instead of isPrinted which will then set isSelected flag.
ng-click="PrintTicket()"
You shouldn't be defining ng-controller="PrintTicket" twice which will instantiate controller function again. You should have both divs wrap inside single controller called PrintTicket
Plunkr Demo
After a discussion it seems like you wanted to share a data amongest two controller, so for that reason you could service to sharing data between two controller. So you can set service variable in one controller and access that value from service inside another controller.
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'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();
}
});