For a chrome extension, I am using the popup (at the top righ of chrome) as a simple login form with Angular.
The popup is only one view displaying a login form or user info using ng-if and depending on the loggedIn state.
The problem is that only the username is saved and suggested by autocomplete on further login. Not the password.
See bellow the yellow username input after I selected aaaa from chrome's auto-suggested drop-down list. See also that the password is not automatically filed like it does on classic website form
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link href="styles/main.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
<div ng-if="loggedIn">
<p>
<img src="images/logo-full.png">
</p>
<p class=""><strong>You're logged in as:</strong>
</p>
<p><i>{{user}}</i>
</p>
<br>
<div class="center-block">
<button class="btn btn-danger" ng-click="logout()">Log out</button>
<a class="btn btn-primary pull-right" ng-href="https://example.com/cockpit" target="_blank">Go to Cockpit</a>
</div>
</div>
<div ng-if="!loggedIn">
<p>
<img src="images/logo-full.png">
</p>
<form ng-submit="login(username, password)">
<div class="form-group">
<label for="username" class="sr-only">Email</label>
<input id="username" class="form-control" type="text" ng-model="username" required placeholder="Email">
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input id="password" class="form-control" type="password" ng-model="password" required placeholder="Password">
</div>
<div class="alert alert-danger" role="alert" ng-if="error">{{error}}</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-disabled="loading">Log in</button>
</div>
<div class="form-group">
<small>Forgot your password?</small>
</div>
</form>
<div class="margin-top-big">
<strong>Don't have an account? Get started</strong>
</div>
</div>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-cookie/jquery.cookie.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script src="lib/myLib.js"></script>
<!-- build:js scripts/popup.js -->
<script src="scripts/popup.js"></script>
<!-- endbuild -->
</body>
</html>
Related
<%#page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This is social network site" />
<meta name="keywords" content="Social Network, Social Media, Make Friends, Newsfeed, Profile Page" />
<meta name="robots" content="index, follow" />
<title>Rafiki</title>
<!-- Stylesheets
================================================= -->
<link href="<c:url value='/static/css/bootstrap.min.css' />" rel="stylesheet"/>
<link href="<c:url value='/static/css/style.css' />" rel="stylesheet"/>
<link href="<c:url value='/static/css/ionicons.min.css' />" rel="stylesheet" />
<link href="<c:url value='/static/css/font-awesome.min.css' />" rel="stylesheet"/>
<!--Google Webfont-->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700' rel='stylesheet' type='text/css'/>
<!--Favicon-->
<link rel="shortcut icon" type="image/png" href="<c:url value='/static/images/favicon.png' />" />
</head>
<body ng-app="myApp" ng-controller="UserController as ctrl" ng-init="ctrl.init()">
<!-- Header
================================================= -->
<header id="header">
<nav class="navbar navbar-default navbar-fixed-top menu">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="rafiki" href="<c:url value='FriendBinder' />" >RAFIKI</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
<ul class="nav navbar-nav navbar-right main-menu" ng-controller="UserController as ctrl">
<form class="form-inline">
<fieldset class="form-group">
<label class="sr-only" for="email">Email Address</label>
<input type="email" class="form-control input-sm" id="example-email" placeholder="Email">
</fieldset>
<fieldset class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control input-sm" id="example-password" placeholder="Password">
</fieldset>
<fieldset class="checkbox-inline">
<label>
<input type="checkbox">Remember me
</label>
</fieldset>
<button type="submit" class="btn-primary">Login In
</button>
</form>
<button type="submit" ng-click="ctrl.showRegister()" class="btn-primary">Register</button>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</header>
<!--Header End-->
<!-- Top Banner
================================================= -->
<section id="banner">
<div class="container" >
<!-- Sign Up Form
================================================= -->
<div class="sign-up-form" ng-show="ctrl.isShowRegister" >
<h2 class="text-white">Find My Friends</h2>
<div class="line-divider"></div>
<div class="form-wrapper">
<p class="signup-text">Signup now and meet awesome people around the world</p>
<form ng-submit="ctrl.submit()" name="myForm">
<fieldset class="form-group">
<input type="text"
class="form-control" id="example-name" placeholder="Enter name" ng-model="ctrl.user.name" name="name"
required ng-minlength="3">
<div class="has-error" ng-show="myForm.$dirty">
<span ng-show="myForm.name.$error.required">This is arequired field</span>
<span ng-show="myForm.name.$error.minlength">Minimum length required is 3</span> <span ng-show="myForm.name.$invalid">This field is invalid </span>
</div>
</fieldset>
<fieldset class="form-group">
<input type="email" class="form-control" id="example-email" placeholder="Enter email" ng-model="ctrl.user.email" name="email"
required>
<div class="has-error" ng-show="myForm.$dirty">
<span ng-show="myForm.email.$error.required">This is arequired field</span>
<span ng-show="myForm.email.$invalid">This field is invalid </span>
</div>
</fieldset>
<fieldset class="form-group">
<input type="password" class="form-control" id="example-password" placeholder="Enter a password" ng-model="ctrl.user.password" name="password" required>
<div class="has-error" ng-show="myForm.$dirty"> </div>
</fieldset>
<p>By signning up you agree to the terms</p>
<button type="submit" class="btn-secondary" ng-disabled="myForm.$invalid">Create Account </button>
</form>
</div>
</div><!-- Sign Up Form End -->
</div>
</section>
<!-- Footer
================================================= -->
<footer id="footer">
<div class="copyright">
<p>Copyright #Rafiki 2017. All rights reserved</p>
</div>
</footer>
<!--preloader-->
<div id="spinner-wrapper">
<div class="spinner">
</div>
</div>
<!-- Scripts
================================================= -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="<c:url value='/static/js/app.js' />"></script>
<script src="<c:url value='/static/js/controller/user_controller.js' />"></script>
<script src="<c:url value='/static/js/service/user_service.js' />"></script>
<script src="<c:url value='/static/js/jquery.incremental-counter.js' />"></script>
<script src="<c:url value='/static/js/jquery-3.1.1.min.js' />"></script>
<script src="<c:url value='/static/js/jquery.appear.min.js' />"></script>
<script src="<c:url value='/static/js/bootstrap.min.js' />"></script>
<script src="<c:url value='/static/js/script.js' />"></script>
</body>
</html>**strong text**
//isShowRegister is getting true but signup form is not viewing.
'use strict';
angular.module('myApp').controller('UserController', ['$scope', 'UserService', function($scope, UserService) {
var self = this;
self.user={id:null,name:'',email:'',password:''};
self.users=[];
self.init=init;
var message=message;
var isShowRegister=isShowRegister;
self.submit = submit;
self.reset = reset;
self.showRegister=showRegister;
function init() {
debugger;
self.isShowRegister=false;
}
function showRegister(){
debugger;
self.isShowRegister=true;
}
function createUser(user){
UserService.createUser(user)
.then( function (d){
self.message=d},
function(errResponse){
console.error('Error while creating User');
}
);
}
function submit() {
if(self.user.id===null){
console.log('Saving New User', self.user);
createUser(self.user);
}else{
updateUser(self.user, self.user.id);
console.log('User updated with id ', self.user.id);
}
reset();
}
function reset(){
self.user={id:null,username:'',address:'',email:''};
$scope.myForm.$setPristine(); //reset Form
}
}]);
please check this, there might be some initialization problem as showRegister function is called on clicking and isShowRegister value is also getting true but signup form is not showing.
You probably meant to do this:
var self = this;
self.user={id:null,name:'',email:'',password:''};
self.users=[];
self.init=init;
var message=message;
self.isShowRegister = false; //<------------
self.submit = submit;
self.reset = reset;
self.showRegister=showRegister;
I am new to AngularJs. I am just getting confused why does my code when the value for ng-app is just empty string the Angular directives are working but on the other hand the directives are not working if the its value is not empty string.
What is happening here? My code is below:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1"; charset=ISO-8859-1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/loginPage.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<title>Login</title>
</head>
<body **ng-app="loginApp"** class="body-bg-blue">
<div class="container">
<div class="row"></div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="jumbotron vertical-center">
<div class="login-form">
<div class="page-header">
<h1>STWEBAPP</h1>
</div>
<div **ng-controller="loginController"**>
<form name="loginForm" ng-submit="login()" role="form">
<div class="form-group">
<input type="text" name="username" id="username" ng-model="username" class="form-control" placeholder="User Name" required />
<span ng-show="loginForm.username.$dirty && loginForm.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group">
<input type="password" name="password" id="password" ng-model="password" class="form-control" placeholder="Password" required />
<span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<div class="form-group">
<button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn-danger">Login</button>
<img ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
</div>
<div class="row"></div>
</div>
</body>
</html>
I assume you are talking about ng-app directive, if you declare ng-app int he application with a name , you need the module to be declared.
var app = angular.module("loginApp", []);
app.controller("loginController", ["$scope",
function($scope) {
}
]);
DEMO
var app = angular.module("loginApp", []);
app.controller("loginController", ["$scope",
function($scope) {
}
]);
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/loginPage.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<title>Login</title>
</head>
<body ng-app="loginApp" class="body-bg-blue">
<div class="container">
<div class="row"></div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="jumbotron vertical-center">
<div class="login-form">
<div class="page-header">
<h1>STWEBAPP</h1>
</div>
<div ng-controller="loginController">
<form name="loginForm" ng-submit="login()" role="form">
<div class="form-group">
<input type="text" name="username" id="username" ng-model="username" class="form-control" placeholder="User Name" required />
<span ng-show="loginForm.username.$dirty && loginForm.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group">
<input type="password" name="password" id="password" ng-model="password" class="form-control" placeholder="Password" required />
<span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<div class="form-group">
<button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn-danger">Login</button>
<img ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
</div>
<div class="row"></div>
</div>
</body>
</html>
Am trying to do angular form validation am not getting error message when i click on submit, i have added two text two receive to take first name and last name what went wrong i couldn't find please let me know
<!-- Bootstrap Core CSS -->
<link href="resources/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="resources/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="resources/sb-admin/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="resources/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Date picker css -->
<link rel="stylesheet" href="resources/datepicker/datepicker.min.css"></link>
<!-- My css -->
<link rel="stylesheet" href="resources/mine/css/MyCss.css"></link>
<script src="resources/js/angular/angular.js"></script>
<script src="resources/js/app/app.js"></script>
</head>
<body ng-app="myapp" ng-controller="mainController">
<div id="wrapper">
<!-- Navigation -->
<%# include file="Menu.jsp" %>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><b>Student Enrollment</b></h3>
</div>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Basic Information for admin
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-body"> <!-- flot-chart previus class name -->
<form id="userForm" method="post" class="form-horizontal" action="login" ng-submit="submitForm()" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.terms.$invalid && (userForm.terms.$dirty || submitted)}">
<label class="col-xs-2 control-label">Student Full Name</label>
<div class="col-xs-3">
<input type="text" name="firstname" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your First Name is required.</p>
</div>
<div class="col-xs-3">
<input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your Last Name is required.</p>
</div>
</div>
<div class="form-group">
<div class="col-xs-1 ">
<button type="submit" class="btn btn-primary ">Submit</button>
</div>
<div class="col-xs-1 ">
<button type="reset" class="btn btn-default" id="rstbutton">Refresh</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script type="text/javascript" src="resources/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="resources/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="resources/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="resources/sb-admin/sb-admin-2.js"></script>
</body>
</html>
set name for form like to this name="userForm"
<form name="userForm">
<input type="text" name="name" ng-model="" >
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your Last Name is required.</p>
<input type="text" name="firsname" ng-model="" >
<p ng-show="userForm.firstname.$error.required && (userForm.firstname.$dirty || submitted)" class="help-block">Your First Name is required.</p>
</form>
Some code changes need to be made :
ng-model for both the text boxes should be different. In your code it is looking like same for both inputs.
name attribute value should be different if you want to perform different validations on both the fields.
Working demo :
var app = angular.module('myApp',[]);
app.controller('myController',function( $scope ) {
$scope.validate = function() {
alert('submitting..');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="myController">
<form name="userForm" ng-submit="userForm.$valid && validate()" novalidate>
<div class="form-group">
<label class="col-xs-2 control-label">Student Full Name</label>
<div class="col-xs-3">
<input type="text" name="firstname" class="form-control" ng-model="user.firstname" placeholder="Your Name" ng-required="true">
<p ng-show="submitted == true && userForm.firstname.$error.required" class="help-block">Your First Name is required.</p>
</div>
<div class="col-xs-3">
<input type="text" name="lastname" class="form-control" ng-model="user.lastname" placeholder="Your Name" ng-required="true">
<p ng-show="submitted == true && userForm.lastname.$error.required" class="help-block">Your Last Name is required.</p>
</div>
</div>
<input type="submit" value="Submit" ng-click="submitted = true"/>
</form>
</div>
For a Chrome extension, I am using the popup as a login form with Angular.
But on OS X, when I click on the username autocomplete suggestion, the popup close itself like when you click outside of the popup. But it works well on Windows.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link href="styles/main.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
<div ng-if="loggedIn">
<p>
<img src="images/logo-full.png">
</p>
<p class=""><strong>You're logged in as:</strong>
</p>
<p><i>{{user}}</i>
</p>
<br>
<div class="center-block">
<button class="btn btn-danger" ng-click="logout()">Log out</button>
<a class="btn btn-primary pull-right" ng-href="https://example.com/cockpit" target="_blank">Go to Cockpit</a>
</div>
</div>
<div ng-if="!loggedIn">
<p>
<img src="images/logo-full.png">
</p>
<form ng-submit="login(username, password)">
<div class="form-group">
<label for="username" class="sr-only">Email</label>
<input id="username" class="form-control" type="text" ng-model="username" required placeholder="Email">
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input id="password" class="form-control" type="password" ng-model="password" required placeholder="Password">
</div>
<div class="alert alert-danger" role="alert" ng-if="error">{{error}}</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-disabled="loading">Log in</button>
</div>
<div class="form-group">
<small>Forgot your password?</small>
</div>
</form>
<div class="margin-top-big">
<strong>Don't have an account? Get started</strong>
</div>
</div>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-cookie/jquery.cookie.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script src="lib/myLib.js"></script>
<!-- build:js scripts/popup.js -->
<script src="scripts/popup.js"></script>
<!-- endbuild -->
</body>
</html>
Any idea for a workaround?
It seems that OSX handles the click on the text popup as the click outside of the extension popover area, which causes it to close.
I've observed it on extensions for Safari and Chrome, but only on OSX.
Here's a related ticket in the Chromium bugtracker.
In some cases you can make a custom control which will use divs to display popup content, preventing this issue. For the autofill, I don't think the workaround exists. You can try to disable autofill completely in OSX browsers. Hardly a better solution, but might be appropriate for you.
I am new to angularjs. I am stuck on one issue for last 24 hours and not getting any clue. Basically I have a simple submit form which is there in partial view html. This partial view appears when user click on signup link at index.html. Issue is when I press submit button it does not go to the mentioned controller, Instead it gives a following message :-
Cannot GET /signup?username=myusername&password=mypassword&login=Sign+in
But when I paste the same partial html code in index.html, it works fine it goes to the attached controller and print the alert statement. I am not having any idea why it is happening. Can somebody please help me to understand, what's the real cause of it????
index.html:
<!-- public/index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>My Cart</title>
<!-- JS -->
<script src="libs/jquery/dist/jquery-2.1.1.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap-modal.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/UserCtrl.js"></script>
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/NerdCtrl.js"></script>
<script src="js/controllers/MenuCtrl.js"></script>
<script src="js/controllers/AddCtrl.js"></script>
<script src="js/services/NerdService.js"></script>
<script src="js/controllers/GeekCtrl.js"></script>
<script src="js/services/GeekService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
<!-- CSS-->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
<link href="css/demo.css" rel="stylesheet">
<link href="css/yamm.css" rel="stylesheet">
<!-- Include jQuery Popup Overlay -->
<script src="http://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="NerdController">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>How it works</li>
<li>Service Area</li>
<li>Feedback</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Member Login <b class="caret"></b></a>
<ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
<li>
<div class="row">
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control input-sm" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control input-sm" id="exampleInputPassword2" placeholder="Password" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-sm">Sign in</button>
Forgot password?
</div>
</form>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<!-- ANGULAR DYNAMIC CONTENT -->
<div class="container">
<div ng-view>
</div>
</div>
</div>
</body>
</html>
and partial view : signup.html
<div ng-controller="AddController">
<form data-title="Sign in" data-value="login" class="tab-pane" name="login">
<input type="text" name="username" value="" placeholder="Username" ng-model="model.username" ng-minlength="3" required autocapitalize="false" />
<input type="password" name="password" value="" placeholder="Password" ng-model="model.password" required autocapitalize="false" autocorrect="false" />
<input type="submit" name="login" value="Sign in" data-ng-click="submit(model)" />
</form>
</div>
Controller : AddCtrl.js
// public/js/controllers/NerdCtrl.js
angular.module('AddCtrl', []).controller('AddController', function($scope,$http) {
$scope.formData = {};
$scope.submit = function(){
alert('Add Ctrl');
};
});
I believe Angular is not able to locate the controller for your html.
The reason could be due to your declaration
angular.module('AddCtrl', [])
This creates a new module AddCtrl. Do you want module per controller?
Also has the module AddCtrl registered as dependency on the mail module.
Also make sure that angular.module('AddCtrl', []) is not declared multiple times. This syntax creates module. To retrieve module use angular.module('AddCtrl')