Skip to content

Instantly share code, notes, and snippets.

@porfidev

porfidev/app.js

Created June 9, 2015 15:45
Show Gist options
  • Save porfidev/5ca7ff28e724450f8df8 to your computer and use it in GitHub Desktop.
Save porfidev/5ca7ff28e724450f8df8 to your computer and use it in GitHub Desktop.
Download ZIP
modal-test
Raw
app.js
/**
* Created by elporfirio on 09/06/2015.
*/
angular.module('BootstrapTest', ['ngRoute'])
.directive('modalLoginForm', function(){
return {
restrict: 'E',
templateUrl: 'modal-login.html',
controller: 'LoginUserController',
link: function($scope, $element, $attributes) {
console.log("Formulario Login -- listo");
// do what you want here.
}
};
}).directive('loginForm', function(){
return {
restrict: 'E',
templateUrl: 'login.html',
controller: 'LoginUserController',
link: function($scope, $element, $attributes) {
console.log("Formulario Login -- listo");
// do what you want here.
}
};
}).controller('LoginUserController', [
'$window',
'$scope',
function($window, $scope) {
var self = this;
self.userData = {
email: 'elporfirio@gmail.com'
};
self.messages = null;
self.loginUser = function(){
//XHR request
var responseSimulated = [
'gomu gomu no pistol, Error from back'
];
self.messages = responseSimulated;
/* How do this correctly */
$("#myModal").on('hidden.bs.modal', function (e) {
// do something...
alert('aaaww yeah');
self.messages = null;
});
};
}]);
Raw
demo1.html
<!DOCTYPE html>
<html ng-app="BootstrapTest">
<head lang="en">
<meta charset="UTF-8">
<title>Pruebas de Modal Scope</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>
<body>
<h2>Pruebas de Modal Scope</h2>
<a href style="cursor: pointer" data-toggle="modal" data-target="#myModal">Login</a>
<modal-login-form></modal-login-form>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Raw
login.html
<div class="form-wrapper"
ng-controller="LoginUserController as loginUserCtrl">
<!-- Errores del Back -->
<div ng-show="loginUserCtrl.messages !== null" role="alert" class="alert"
<span ng-repeat="texto in loginUserCtrl.messages">{{ texto }}</span>
</div>
<form name="frm_LoginUser" id="frm_LoginUser" role="form"
ng-submit="frm_LoginUser.$valid && loginUserCtrl.loginUser()"
novalidate>
<div class="form-group has-feedback">
<label class="control-label" for="email">email</label>
<input type="email" name="email" id="email" ng-model="loginUserCtrl.userData.email"
required
class="form-control"/>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
Raw
modal-login.html
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Iniciar Sesión</h4>
</div>
<div class="modal-body">
<div ng-include="'login.html'"></div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment