AngularJS: Login screen directive

Shankar Raman 11:10
Hey Guys,

In order to create a directive which contains html and added functionality in one template, you can refer below code snippet.

I have tried to explain this using Login screen functionality in which when user click on "Login" button it calls controller function which display model value in alert box.

index.html

<html ng-app="simpleDirective">
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
<script src="ngLogin.js"></script>
</head>
<body>
<div ng-controller="Controller">  
  <ng-login ng-model="user"></ng-login>
</div>
</body>
</html>

app.js

var app = angular.module('simpleDirective', ['ngLoginModule']);

app.controller('Controller', ['$scope', function($scope) {
     $scope.user = {};
}]);

ngLogin.js

var tableModule = angular.module("ngLoginModule",[]);

tableModule.directive("ngLogin", function(){
 return {
  restrict:"E",
  scope:{
   userDetail:"=ngModel"
  },
  templateUrl:"login.html",
  controller: ["$scope", function($scope){
   $scope.save = function(){
      alert(JSON.stringify($scope.userDetail));
   }
  }]
 }
});

login.html

UserName: <input type="text" ng-model="userDetail.userName"/><br/>
Password: <input type="password" ng-model="userDetail.password"/><br/>
<input type="button" ng-click="save()" value="Login"/>



Good Day :)

Post a Comment

0 Comments