JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div ng-app="myNewApp" id="container">
    <div ng-controller="loginCont">
      <h1>{{name}}</h1>
<form class="form" name="loginForm" novalidate ng-submit="userLogin()">
	<div class="from-group" ng-class="{'has-error':loginForm.email.$invalid && loginForm.email.$dirty, 'has-success':loginForm.email.$valid && loginForm.email.$dirty}">
		<label for="emial">Email</label>
		<input type="email" class="form-control" ng-model="user.email" name="email" required cu-focus  />
		<span ng-show="loginForm.email.$invalid && loginForm.email.$dirty && !loginForm.email.focused">Wrong Email</span>
	</div>
	<div class="from-group">
		<label for="password">Email</label>
		<input type="password"  class="form-control" ng-model="user.password" name="password" required cs-focus >
		<span ng-show="loginForm.password.$invalid && loginForm.password.$dirty && loginForm.submitted">Wrong Password</span>
	</div>
	<div class="form-group">
		<button class="btn btn-primary" ng-disabled="loginForm.$invalid" type="submit">Login In</button>
	</div>
</form>

</div>

CSS

#container{
    width:60%;
    margin:0 auto;
}

JavaScript

var app = angular.module('myNewApp', [])
	.controller('loginCont', ['$scope', function ($scope) { //what is different from directive controller?
		$scope.name = 'Angular';
	}])

angular.module('myNewApp')
	.directive('cuFocus', function () {
			return {
				restrict : 'A',
				require :'ngModel', //why ngModel require here what it's doing here? what else we can pick further?
				link : function (scope, element, attr, controller) { //what is controller here?
					controller.focused = false; //how !loginForm.email.focused connected to controller here?
					element.bind('focus', function (e) {
						scope.$apply(function(){ //why should apply intead controller.focused = true;
							controller.focused = true; //how this update there in span attribute?
						});
					})
					.bind('blur', function (e) {
						scope.$apply(function(){	
							controller.focused = false;
						});
					})
				}
			}
	});