I'm trying to use $ionicPopup to handle login/registration on my app.
I'm opening it from a service, so I created a new scope and attached it to the ionicPopup.
It looks something like this:
$ionicPopup.show
template: '''
<form name="loginForm" novalidate>
...
</form>
''',
scope: $scope,
buttons: [
{
text: 'Cancel',
},
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: ( e ) ->
form = $scope.loginForm #why is it undefined?
}
]
So I named the form as loginForm, and I want to access it inside the onTap function to handle validation. But the loginForm does not exists on the $scope, like it would in a normal form validation inside a controller.
How should I handle the validation here?
If you give ionicpopup a templateUrl, instead of hard coded template string, you can use a regular controller inside the template that does the validation.
I deleted all the ionicpopup related buttons and placed the necessary buttons inside the template.
In this way I was able to control the ionicpopup's state from the controller (i.e. closing the popup).
I found solution, it works for me. All you need to change is define in controller your form:
$scope.form = {
loginForm: {}
};
$ionicPopup.show
template: '''
<form name="form.loginForm" novalidate>
...
</form>
''',
scope: $scope,
buttons: [
{
text: 'Cancel',
},
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: ( e ) ->
form = $scope.form.loginForm
}
]
Using my solution, you don't have to delete the ionic popup buttons.
What you can do to validate, is by using ng-Model.
You don't have to use <form>. So I remove <form>.
$ionicPopup.show
template: '<input name="username" ng-model="data.username">',
scope: $scope,
buttons: [
{
text: 'Cancel',
},
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: ( e )
var user_name = $scope.data.username
// do validation here
if(user_name != 'undefined') {
...
}
}
]
I prefer not to remove the ionic popup buttons. Hope it is useful to others. cheers!
Use
onTap: ( e )
e.eventPreventDefault()
var user_name = $scope.data.username
// do validation here
if(user_name != 'undefined') {
...
}
Related
I have a modal in Ionic that shows a list of country flags for the user to choose, however my ng-click on the language flag don't appear to fire the $scope.function() I have assigned. Here's what I've got:
Showing the modal:
$scope.showLanguages = function() {
var myPopup = $ionicPopup.show({
templateUrl: 'templates/languageSelect.html',
title: 'Language Select',
scope: $scope,
buttons: [
{
text: '<b>Close</b>',
type: 'button-positive',
onTap: function (e) {
return;
}
}
],
cssClass: 'animated bounceInDown'
});
}
My template that displays my flags, with the ng-click on them:
<div class="row">
<button ng-class="getFlagClass(language)" ng-click="setLanguage()" class="col flag-icon flag-icon-squared" ng-repeat="language in data.languages" />
</div>
And finally my ng-click function which is on the same scope as the one that opens the modal (notice the $scope being passed into the modal)
$scope.setLanguage = function() {
alert('test');
}
Can anyone suggest what I might be doing wrong here? This looks like a bug in Ionic but I could be wrong.
Thanks
It turns out it WAS working, but the alert wasn't being shown... I suspect this is because it was within a modal? I don't know.
Anyway, there's nothing wrong with the above code after all.
I am trying to implement an automatic alert into my AngularJS application using Angular-Strap and the $alert service. So far so good, however, I am left with an issue I can't seem to resolve.
Is there a way I can I set a callback to capture when the $alert is hidden either using the duration property or the alert.hide() command? I want to run a function when the alert goes into a hidden state.
My code snippets looks like this:
var alertContent = '';
// Define the critical alert
var criticalAlert = $alert({
templateUrl: 'templates/critical.alert.tpl.html',
title: ' Critical Alert Detected!',
content: alertContent,
container: 'body',
type: 'danger',
dismissable: false,
duration: '20',
show: false
});
...
alertContent = 'Foo Bar!';
...
criticalAlert.$promise.then(criticalAlert.hide);
...
$scope.$on('alert.hide', function() {
console.log('Alert Hidden');
});
The result of the $promise, you can pass your own function, eg:
criticalAlert.$promise.then(function(){criticalAlert.hide();console.log('Alert Hidden'); })
More about $promise anglular $q
UPDATE
You can use $watch.
Of course, it's not a nice solution, but the best I found. At least, it works!
var alert = $alert({
title: ' Critical Alert Detected!',
content: 'its Alert!',
container: 'body',
type: 'danger',
dismissable: false,
duration: '5',
show: false,
});
$scope.$watch(function(){return alert.$isShown;},function(val){
if(val===true)
console.log('alert opened',val);
else
console.log('alert closed',val);
});
alert.$promise.then(alert.show);
UPDATED 2
We can use event of angular.
Live example on jsfiddle.
.controller('ExampleController', function($scope, $alert) {
$scope.alert = $alert({
title: ' Critical Alert Detected!',
content: 'its Alert!',
container: '#divForAlert',
type: 'danger',
dismissable: false,
duration: '5',
show: false,
prefixEvent:"mymodal",
});
$scope.alert.$promise.then(function() {
$scope.alert.show();
});
$scope.$root.$on('mymodal.hide.before', function(event) {
console.log('hide before',event);
});
$scope.$root.$on('mymodal.hide', function(alert) {
console.log('hide',alert);
});});
And some important html
<div ng-controller="ExampleController">
<h3>
ExampleController
</h3>
<form name="ExampleForm" id="ExampleForm">
<div id="divForAlert">
</div>
</form>
I have the following structure of my grid
$scope.grid = $("#prospectsGrid").kendoGrid({
columns: [
{ template: "<input type='checkbox' class='checkbox' />", width: "3%" },
{ template: "#= FirstName + ' ' + LastName #", title: "Name" },
{ field: "FirstName", hidden: true },
{
command: [
{
name: "edit",
text: "<span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>"
}
}).data("kendoGrid");
As you can see I am accessing this grid with the help of an identifier that is #prospectsGrid. Now without changing any of the functionality inside the grid, I need to replace the identifier (#prospectsGrid) with some angular element. How can I do that? Any help would be appreciated.
Just for reference my HTML Code is
<div id="prospectsGrid" class="gridcommon"></div>
As micjamking says in comments, you need inject in your module KendoUI directives.
angular.module("myApp",["kendo.directives"])
Then you will can use in your html code something like this
<div kendo-grid="myKendoGrid"
k-options="myKendoGridOptions">
</div>
In controller:
angular.module("managerOMKendo").controller("myController", function ($scope) {
// Functions controller
$scope.createMyGrid = function () {
$scope.myKendoGridOptions = {
columns: [ {
field: "FirstName",
template: "<input type='checkbox' class='checkbox' />", width: "3%"
},
command: [{
name: "edit",
text: "<span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>"
}]
// Here you can put your complete configuration. Check official example
}
}
}
// Main thread
$scope.createMyGrid(); // call the function that creates the grid
});
Here is the official example
It´s possible that you need change something. For example where I have written text, maybe you have to write template. It´s hard without plunker.
Good luck!
I'm having weird issues that I can't seem to find an explanation for.
I show a popup with a single input which I am binding to a variable on my scope I'm passing the $scope to the popup.
The binding works and I can see the variable that is set and it changes as I type. But as soon as I close the popup and log out that scope variable on the "on tap" function" it seems to go back to its original value.
EDIT: a pen that demonstrated the general issue:
http://codepen.io/anon/pen/ariDh
code:
var sendPopup = $ionicPopup.show({
title: $translate.instant(popupTitle),
subTitle: $translate.instant('POPUP_WITH_MESSAGE_SUBTITLE'),
templateUrl: 'templates/leave-message-popup.html',
scope: $scope,
buttons: [
{ text: $translate.instant('BUTTON_CANCEL') },
{
text: $translate.instant('BUTTON_SEND'),
type: 'button-positive',
onTap: function(e) {
console.log("contact message:" + $scope.contactMessage);
if (!$scope.contactMessage) {
console.log("preventing default");
e.preventDefault();
} else {
$scope.sendData(contactType);
}
}
},
]
});
template:
<input type="text" ng-model="contactMessage" name="message" placeholder="{{'PLACEHOLDER_CONTACT_MESSAGE' | translate}}" required autofocus>
{{contactMessage}}
This amended version of your codepen shows this working: http://codepen.io/anon/pen/rgBLa
Changing the variable to an object that is on the scope that is passed to the popup correctly allows this to then be bound back to the controllers scope when it changes. This is needed due to the way the scope is managed when passed to the $ionicPopup.
$scope.contactMessage = { text: "text" }
Then updated the mark-up to correctly look at this property on the scope.
<input type="text" ng-model="contactMessage.text" name="message">
{{contactMessage.text}}
I hope this helps with your issue.
I am using AngularJS Modal Service. http://fundoo-solutions.github.io/angularjs-modal-service/
I setup it in a simple way
Button to open a Model
<div data-ng-controller="contest as vm">
<a class="btn btn-primary" data-ng-click="vm.createFileUploadDialog()">Upload Image</a>
</div>
Inisde Controller I have a function defined createFileUploadDialog and expose it from my viewModel.
vm.createFileUploadDialog = createFileUploadDialog;
vm.uploadme = {};
vm.uploadme.src = "";
function createFileUploadDialog() {
createDialog('/app/templates/fileuploadDialog.html', {
id: 'filuploadDialog',
title: 'Upload Contest Image',
backdrop: true,
success: { label: 'Upload', fn: uploadSuccess },
cancel: { label: 'Cancel' },
});
}
function uploadSuccess() {
console.log(vm.uploadme);
//need to call to the backend
}
And inside "fileUploadDialog.html" I have a simple markup
<div>
<input type="file" fileread="uploadme.src" />
</div>
"fileread" is a directive which return back the src of the File. Now the problem I have
As you can see I am doing console.log inside "UploadSuccess", in response I am getting the result "Object {src: ""}",
It looks like the Modal values not capture inside controller. But If I do the same with $rootScope, it logs out the File that need to upload. So, how can I access the value without using $rootScope? Please suggest
PS:
I am not define separate controller for Modal, want to use the same controller that treats my view.
** Modals scope is not the same as your controller scope!**
if you want to see your Controller scope inside of your modal and manupulate it , you're gonna have to use resolve inside of your modal markap like this :
createDialog('/app/templates/fileuploadDialog.html', {
id: 'filuploadDialog',
title: 'Upload Contest Image',
backdrop: true,
success: { label: 'Upload', fn: uploadSuccess },
cancel: { label: 'Cancel' },
resolve:{
controllerscope:function(){
return $scope;
}
}
});
And now , inside of your modal controller you can inject :** controllerscope ** and use it , also data binding works well like this :
app.controller('modalcontroller',function($scope,controllerscope){
// no you have access to your controller scope with **controllerscope**
})
So go and have a look at your modal plug in wich you are using and search for resolve and controller
thats it