Can anyone please suggest me How to implement a POP UP function in Angular + Node js?
I want to implement a login which should pop up when the user clicks login button.
Thanks
Depends on what CSS framework you are using. I often use Bootstrap, and the ui-bootstrap directives. This allows easy modal dialog display.
This is dummy html with bootstrap content that will trigger pop up on button click. You will notice I've placed ng-click directive on the login button, so you should just create angular function on your controller that is combined with this view.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modalExample">Login modal</button>
<div class="modal fade modalExample" tabindex="-1" role="dialog" aria-labelledby="myModallable">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form>
<div class="form-group">
<input type="email" class="form-control" ng-model="username" placeholder="Username" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" ng-model="password" />
</div>
<div class="form-group">
<button class="btn btn-default" ng-click="login(username,password)">Login</button>
</div>
</form>
</div>
</div>
</div>
This will handle your problem on the client side, and related to Node.js I suppose you will have some api controller that will listen for the request that you can send from angular factory that represents service.
Several ways of doing this either with jQuery or angular.js.
ngDialog plugin is available you can go through it if you want popup with pure angular.
Related
I am new in angular JS, working with existing project on angular 1.2.16
please check the code sample
<form role="form" name="UserCreateForm"
novalidate class="biocheck-form">
<div class="row">
<div class="col-xs-4"> <input class="input-forms" placeholder="Usuario" aa-field-group="UserCreate.data.username" type="text" aa-label="Usuario"
required maxlength="20"> </div>
<div class="col-xs-4"> <input class="input-forms" placeholder="ejemplo#mail.com" aa-field-group="UserCreate.data.email" type="email"
aa-label="Email" required> </div>
<div class="col-xs-4"> <input class="input-forms" placeholder="" aa-field-group="UserCreate.data.newPassword" type="password" aa-label="Contraseña"
required> </div>
</div>
Rol
</div> <button type="submit" class="btn btn-primary pull-right" aa-submit-form="UserCreate.on.doUserCreate()"> Guardar </button> <button class="btn btn-cancel pull-right" ng-click="UserCreate.on.toUserList()"> Cancelar </button> </form>
I want to check debug the next flow of the code. If anything is unclear please comment.
I want to check how it is save the data in DB this project used yii for handling server side request.
Thanks
If i understand correctly you need to open the developer tools in your browser, go to the Source tab and find the js file that holds the function on your ng-click. Then put a breakpoint there and click the button. The browser should stop in the breakpoint and with F10 you can go line by line to your code.
In Angular SPA application, login screen is show/hide based on ng-show directive variable which is in $rootScope.
If user is in home page and refresh the page (F5), Login screen is shown as Complete page is refreshed and lost root scope variable value.
How to fix this issue?
Code Sample::
<body ng-controller="mainController">
<div class="container" ng-controller="schoolLoginCtrl"
ng-show="showLogin">
<form class="form-signin" ng-submit="login()">
<h2 class="form-signin-heading">Login Page</h2>
<label for="userName" class="sr-only">User Name</label> <input
type="text" id="userName" ng-model="user.userName"
class="form-control" placeholder="User Name" required autofocus>
<label for="inputPassword" class="sr-only">Password</label> <input
type="password" id="inputPassword" ng-model="user.password"
class="form-control" placeholder="Password" required>
<div class="alert alert-danger">{{errorMsg}}</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign
in</button>
</form>
</div>
<div class="container" ng-show="!showLogin">
<div ng-view></div>
</div>
.controller('mainController', function($scope, $rootScope,
$location) {
$rootScope.showLogin = true;
});
use ngcookie or pouchdb or localstorage to store user session
this can help you https://github.com/sahat/satellizer
You'll need to implement some type of stateful storage functionality. This can be accomplished using $cookies or local storage (there are many 3rd party implementations of this).
Whenever you refresh the page, all the javascripts and other resources are loaded again and so the angularjs, which will basically re-initialize the $rootScope with its initial value and everything bind to it will be lost.
I will suggest to use the web storage(local/session storage) or cookies as per your use cases and requirements.
This is from the docs
This is my code and output
What should be added to show the toolbar with done button?
To be able to see the Done button, you will need to download Cordova keyboard plugin: http://ngcordova.com/docs/plugins/keyboard/
Then use this line:
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
Something like this:
module.controller('MyCtrl', function($scope, $cordovaKeyboard) {
$cordovaKeyboard.hideAccessoryBar(false)
});
This example will work only if you include ngCordova to your Ionic project.
More information can be found here: https://github.com/driftyco/ionic-plugin-keyboard
Keyboard.hideKeyboardAccessoryBar Hide the keyboard accessory bar with
the next, previous and done buttons.
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
Precisely the buttons you can see on a top image.
I think it may have to be a form...so our app shows the word done in the toolbar and this is what our code looks like. I don't know for sure but I am guessing the done button shows up when there is a form to be submitted. Give it a go and let me know.
<form ng-submit="authenticate(user)" name="loginform" id="loginform">
<div class="list has-header padding">
<div style="height: 48px;" class="item item-input">
<input type="text" placeholder="Username" ng-model="user.username">
<i class="icon ion-close-circled padding" ng-if="user.username.length" ng-click="resetUsername()"></i>
</div>
<div style="height: 48px;" class="item item-input">
<input type="password" placeholder="Password" ng-model="user.password">
<i class="icon ion-close-circled padding" ng-if="user.password.length" ng-click="resetPassword()"></i>
</div>
</div>
<div style="text-align: center;">
<button type="submit" class=" login button button-full button-positive">Login</button>
</div>
</form>
My application uses the Angular file upload component.
https://github.com/danialfarid/angular-file-upload
It previously worked but I seem to have broken it during refactoring, and am not sure how to fix it.
The application allows for selection of the spreadsheet, but when the Import button is pressed it just highlights but does not do anything. The onFileSelect function executes, but the submitUpload is never called. There is nothing in the debugger or console.
There is a partial which contain the spreadsheet upload component.
<div class="row">
<div class="col-md-8">
<form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<input type="submit" value=" Import " class="btn btn-success" />
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</form>
</div>
</div>
The relevant code in the controller:
$scope.onFileSelect = function ($files) {
return $scope.selector.file = $files[0];
};
$scope.selector.submitUpload = function () {
console.log('submit upload2');
return $scope.upload = $upload.upload({
url: '/api/batches/spreadsheet_upload.json',
file: $scope.selector.file
}).success(function (data, status, headers, config) {
console.log(JSON.stringify(data.data[0],null,' '))
$scope.selector.tabledata.push(data.data[0]);
});
};
I think the problem is a result of you having your column divs splitting the form, which results in your DesignViewCtrl not being a parent of the submit input. Try the following change in your template:
<div class="row">
<form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
<div class="col-md-8">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<input type="submit" value=" Import " class="btn btn-success" />
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</div>
</form>
</div>
This change ensures your form element is the parent of both column divs.
Based on the documentation for angular-file-upload you don't even need to use a <form> so it seems like the library does that part for you. Try removing the form and just use a <div> for the controller, then use a <button> instead of an <input type="button"> for the Import button.
What I suspect is happening is that the ng-submit event is not being invoked when you click on your "Input button". I've experienced weird issues similar to this when using a form in angularjs and trying to rely on the form submit behavior.
Actually I just looked at it again and I think the problem really is that you have the <form> tag split over two elements (which would not be correct). If you had that rendered within the browser without a partial then it may work but I suspect that having it within the partial like and relying on AngularJS to put it in the browser won't work reliably.
So you can try one of two things:
1) Remove the form tag completely
<div class="row" ng-controller="DesignViewCtrl">
<div class="col-md-8">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<button class="btn btn-success" ng-click="selector.submitUpload()"> Import </button>
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</div>
</div>
2) Leave the form tag but make sure the syntax is valid:
<form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
<div class="row">
<div class="col-md-8">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<input type="submit" value=" Import " class="btn btn-success" />
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</div>
</div>
</form>
I have two buttons on a simple login form in a dropdown on a header bar that is outside of the view/content part of my single page app. There are two buttons on the form:
EDIT: both buttons need to submit the form, but I have two different outcomes; one does new member sign-up, the other login existing members. I do not want to handle this on multiple partials.
My Website
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li class="divider-vertical"></li>
<li>
<div class="btn-group btn-group-xs navbar-btn btn-pad">
NL
FR
EN
</div>
</li>
<li class="divider-vertical"></li>
<!-- Begin Login Section -->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Signup/Login <strong class="caret"></strong></a>
<div class="dropdown-menu">
<div class="accountForm">
<!--form action="#" method="post" role="form"-->
<form name="loginForm" ng-submit="login()" ng-controller="homeController">
<div class="form-group">
<label class="control-label" for="username">Username</label>
<input type="text" ng-model="credentials.username" name="username" class="form-control input-sm" placeholder="username" required/>
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input type="password" ng-model="credentials.password" name="password" class="form-control input-sm" placeholder="password" required/>
</div>
<div class="form-group">
<label class="control-label" for="remember">
<input type="checkbox" class"form-control" name="remember" value="1"/>Remember me</label>
</div>
<div class="form-group btn-group-justified">
<div class="btn-group">
<button button-id="join" type="submit" class="btn btn-default">New? Join us</button>
<input type="hidden" class="btn" />
</div>
<div class="btn-group inline">
<input type="hidden" class="btn" />
<button button-id="login" type="submit" class="btn btn-primary active">Log in</button>
</div>
</div>
</form>
</div>
</div>
</li>
<!-- End Login Section -->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div id="page" ng-view>
The first button is intended to send the user to the login process (if they are already registered) and the second button is for new users to register.
The problem I have is that if I use the <form ng-submit="myFunction()"> directive, I haven't yet found a way to determine the button that was pressed.
I can alternatively create my own directive, where I can determine the button that was pressed, but this seems to be a lot of coding effort by comparison, and is this really the Angular way?
app.directive('buttonId', function() {
return {
restrict: "A",
link: function(scope, element, attributes) {
element.bind("click", function(){
// when attributes.buttonId = 'join'
//call the create script
// when attributes.buttonId = 'login'
//call the authenticate script
});
}
}
});
So my question is simply using ng-submit="myfunction()"can i determine which button was pressed?
I know I am answering my own question, but this seems to be the "correct" way to do this:
<form name="loginForm" ng-submit="login()" ng-controller="homeController">
<div class="form-group btn-group-justified">
<div class="btn-group">
<button type="submit" class="btn btn-default" button-id="join">New?Joinus</button>
<input type="hidden" class="btn" />
</div>
<div class="btn-group inline">
<input type="hidden" class="btn" />
<button type="submit" class="btn btn-primary active" button-id="login">Log in</button>
</div>
</div>
</form≥
The above is the section of the form that I'm interested in. Note that both buttons have type="submit"and not type="button" . This is important for two reasons:
1) you can use the standard HTML5 form validation options when you click the buttons
2) it forces the ng-submithandler.
First the controller
app.controller('homeController', function($scope){
$scope.buttons = { chosen: "" };
$scope.login = function (){
// can get the button that was clicked as it is now added to the scope
// by the directive
alert($scope.buttons.chosen);
};
});
... and now the directive.
Next I handle the click on either button using a directive. This has the purpose of allowing me to identify the button, and pass it to the $scope. This was actually the main purpose of the excercise, but I realised that I could now bind this to anything where I suspected a click and pass some data to the scope.
app.directive('buttonId', function() {
return {
restrict: "A",
link: function(scope, element, attributes) {
element.bind("click", function(){
// able to get the name of the button and pass it to the $scope
// this is executed on every click
scope.buttons.chosen = attributes.buttonId;
// alert(attributes.buttonId + scope.buttons.chosen);
});
}
}
});
I am not sure if i have understood your problem correct but you can differential based on
Calling different function for each ng-submit such as ng-submit="myFunction1()" and ng-submit="myFunction2()"
You can also do the same passing in context using a parameter ng-submit="myFunction(from)"
You can also pass in special $event object as parameter ng-submit="myFunction($event)". This object contains the target information.
You can get a handle to the $event in your ng-click, and get its target, and then get its id, but I wouldn't recommend that it is not the angular way of doing things:
<input type="submit" id="test" data-ng-click="showAlert($event)">
Click Me
</button>
$scope.showAlert = function(event){
alert(event.target.id);
}
Another way is to set property dirty for this button and then to check which of the buttons is dirty.
For example if you have a form named "myForm" you can write something like this:
<form name="myForm" id="myForm" ng-submit="save()" ng-model="myForm" novalidate>
<input type="submit" name="save" ng-model="btnSave" ng-click="(frmForm.save.$setDirty())" />
<input type="submit" name="saveOut" ng-model="btnSaveOut" ng-click="(frmForm.saveOut.$setDirty())" />
</form>
In Javascript file you can handle it by:
if ($scope.btnSave.$dirty){
alert("First was clicked)}
else{
alert("First was clicked)}
}