I have the following dilemma, I have in the index.html the call to a directive called "loggin", when I call the directive on the label, the others stop working, when I remove it, it works normally, the problem is that I need the directive to show me the login screen and can verify the credentials
<html ng-app="myApp" lang="en">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel='stylesheet' href='./bower_components/bootstrap/dist/css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' href='./css/app.css' type='text/css' media='all' />
<script type="text/javascript" src="./bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="./bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="./bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="./bower_components/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="./bower_components/angular-route/angular-route.min.js"></script>
<script type='text/javascript' src='./bower_components/angular-loading-bar/build/loading-bar.min.js'></script>
<script type='text/javascript' src='./bower_components/angular-bootstrap/ui-bootstrap.min.js'></script>
<script type='text/javascript' src='./bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js'></script>
<script type="text/javascript" src="./app/app.js"></script>
<script type="text/javascript" src="./app/factoresController.js"></script>
<script type="text/javascript" src="./app/caracteristicasController.js"></script>
<script type="text/javascript" src="./app/indicadoresController.js"></script>
<script type="text/javascript" src="./app/programasController.js"></script>
<script type="text/javascript" src="./app/procesoAutoevaluacionController.js"></script>
<script type="text/javascript" src="./app/procesoAutoevaluacionInsController.js"></script>
<script type="text/javascript" src="./app/autoevaluacionController.js"></script>
<script type="text/javascript" src="./app/autoevaluacionInsController.js"></script>
<script type="text/javascript" src="./app/documentosProcesoController.js"></script>
<script type="text/javascript" src="./app/autoevaluacionDocumentosController.js"></script>
<script type="text/javascript" src="./app/informesAutoevaluacionController.js"></script>
<script type="text/javascript" src="./app/profesoresController.js"></script>
<script type="text/javascript" src="./app/estudiantesController.js"></script>
<script type="text/javascript" src="./app/parametrosController.js"></script>
<script type="text/javascript" src="./app/maestrosProgramasController.js"></script>
<script type="text/javascript" src="./app/usuariosController.js"></script>
<script type="text/javascript" src="./app/valoracionController.js"></script>
<script type="text/javascript" src="./app/factoresInstitucionalesController.js"></script>
<script type="text/javascript" src="./app/caracteristicasInstitucionalesController.js"></script>
<script type="text/javascript" src="./app/indicadoresInstitucionalesController.js"></script>
<script type="text/javascript" src="./app/autenticacionDirective.js"></script>
<script type="text/javascript" src="./app/ingresoController.js"></script>
<script type="text/javascript" src="./service/factoresServices.js"></script>
<script type="text/javascript" src="./service/caracteristicasServices.js"></script>
<script type="text/javascript" src="./service/indicadoresServices.js"></script>
<script type="text/javascript" src="./service/programasServices.js"></script>
<script type="text/javascript" src="./service/autoevaluacionServices.js"></script>
<script type="text/javascript" src="./service/autoevaluacionInsServices.js"></script>
<script type="text/javascript" src="./service/autoevaluacionDocumentosServices.js"></script>
<script type="text/javascript" src="./service/informesAutoevaluacionServices.js"></script>
<script type="text/javascript" src="./service/profesoresServices.js"></script>
<script type="text/javascript" src="./service/estudiantesServices.js"></script>
<script type="text/javascript" src="./service/parametrosServices.js"></script>
<script type="text/javascript" src="./service/usuariosService.js"></script>
<script type="text/javascript" src="./service/valoracionServices.js"></script>
<script type="text/javascript" src="./service/factoresInstitucionalesServices.js"></script>
<script type="text/javascript" src="./service/caracteristicasInstitucionalesServices.js"></script>
<script type="text/javascript" src="./service/indicadoresInstitucionalesServices.js"></script>
</head>
<body >
<loggin class="col-sm-1 col-sm-offset-5 col-md-10 col-md-offset-2 main" showform2="showform" admin="vistadm" encuesta="vistaenc" evaluador="vistaeva" ng-show="showform"></loggin>
<div ng-show="!showform">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img class="logo" src="./images/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<uib-accordion close-others="oneAtATime">
<ul class="nav nav-sidebar">
<li>
<a class="nav-link" ng-href="#!/encuestas" ng-show="vistaenc">Encuestas</a>
</li>
<div uib-accordion-group class="panel-default" is-open="false">
<uib-accordion-heading><p class="nav-link" ng-show="vistadm">Parametros Autoevaluación</p></uib-accordion-heading>
<ul class="nav nav-sidebar">
<li>
<a class="nav-link" ng-href="#!/parametros" ng-show="vistadm">Rangos de Calificación</a>
</li>
<li>
<a class="nav-link" ng-href="#!/programas" ng-show="vistadm">Programas</a>
</li>
<!-- <li>
<a class="nav-link" ng-href="#!/maestrosProgramas/-1">Maestros Programas</a>
</li> -->
<li>
<a class="nav-link" ng-href="#!/factores" ng-show="vistadm">Factores Programas</a>
<li>
<a class="nav-link" ng-href="#!/caracteristicas" ng-show="vistadm">Caracteristicas Programas</a>
</li>
<li>
<a class="nav-link" ng-href="#!/indicadores" ng-show="vistadm">Aspectos Programas</a>
</li>
<li>
<a class="nav-link" ng-href="#!/factoresInstitucionales" ng-show="vistadm">Factores Institucionales</a>
</li>
<li>
<a class="nav-link" ng-href="#!/caracteristicasInstitucionales" ng-show="vistadm" >Características Institucionales</a>
</li>
<li>
<a class="nav-link" ng-href="#!/indicadoresInstitucionales" ng-show="vistadm">Aspectos Institucionales</a>
</li>
<li>
<a class="nav-link" ng-href="#!/usuarios" ng-show="vistadm">Regristro de Usuario</a>
</li>
</ul>
</div>
<div uib-accordion-group class="panel-default" is-open="false">
<uib-accordion-heading><p class="nav-link" ng-show="vistaeva">Procesos de Autoevaluación</p></uib-accordion-heading>
<ul class="nav nav-sidebar">
<li>
<a class="nav-link" ng-href="#!/procesoAutoevaluacion/-1" ng-show="vistaeva">Autoevaluación Programas</a>
</li>
<li>
<a class="nav-link" ng-href="#!/procesoAutoevaluacionIns/-1" ng-show="vistaeva">Autoevauación Institucional</a>
</li>
<li>
<a class="nav-link" ng-href="#!/procesoPlanMejora/-1" ng-show="vistaeva">Plan de Mejoramiento Programas</a>
</li>
<li>
<a class="nav-link" ng-href="#!/procesoPlanMejora/-1" ng-show="vistaeva">Plan de Mejoramiento Institucional</a>
</li>
</ul>
</div>
</ul>
</uib-accordion>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-view></div>
</div>
</div>
</div>
</div>
</body>
</html>
this is the directive
angular.module("myApp",[])
.directive('loggin', function(){
return{
scope: {
showform2: '=showform2',
admin: '=admin',
evaluador: '=evaluador',
encuesta: '=encuesta'
},
templateUrl: 'login.html',
controller: 'ingresoController'
};
});
this is my app.js the module where I redirect
angular.module("myApp", ['ngRoute','ui.bootstrap','ngAnimate','ngSanitize'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/encuestas', {
templateUrl: 'encuestas.html'
}).
when('/factores', {
templateUrl: 'factores.html',
controller: 'factoresController'
}).
when('/caracteristicas', {
templateUrl: 'caracteristicas.html',
controller: 'caracteristicasController'
}).
when('/indicadores', {
templateUrl: 'indicadores.html',
controller: 'indicadoresController'
}).
when('/programas', {
templateUrl: 'programas.html',
controller: 'programasController'
}).
when('/procesoAutoevaluacion/:procesoAutoevaluacionID', {
templateUrl: 'procesoAutoevaluacion.html',
controller: 'procesoAutoevaluacionController'
}).
when('/procesoAutoevaluacionIns/:procesoAutoevaluacionID', {
templateUrl: 'procesoAutoevaluacionIns.html',
controller: 'procesoAutoevaluacionInsController'
}).
when('/autoevaluacion/:autoevaluacionID', {
templateUrl: 'autoevaluacion.html',
controller: 'autoevaluacionController'
}).
when('/autoevaluacionIns/:autoevaluacionID', {
templateUrl: 'autoevaluacionIns.html',
controller: 'autoevaluacionInsController'
}).
when('/factoresInstitucionales', {
templateUrl: 'factoresInstitucionales.html',
controller: 'factoresInstitucionalesController'
}).
when('/caracteristicasInstitucionales', {
templateUrl: 'caracteristicasInstitucionales.html',
controller: 'caracteristicasInstitucionalesController'
}).
when('/indicadoresInstitucionales', {
templateUrl: 'indicadoresInstitucionales.html',
controller: 'indicadoresInstitucionalesController'
}).
when('/valorarCaracteristicas/:programaID', {
templateUrl: 'valorarCaracteristicas.html',
controller: 'valoracionController'
}).
when('/documentosAutoevaluacion/:autoevaluacionID', {
templateUrl: 'documentosAutoevaluacion.html',
controller: 'autoevaluacionDocumentosController'
}).
when('/informesAutoevaluacion/:autoevaluacionID', {
templateUrl: 'informesAutoevaluacion.html',
controller: 'informesAutoevaluacionController'
}).
when('/profesores/:programaID', {
templateUrl: 'profesores.html',
controller: 'profesoresController'
}).
when('/estudiantes/:programaID', {
templateUrl: 'estudiantes.html',
controller: 'estudiantesController'
}).
when('/parametros', {
templateUrl: 'parametros.html',
controller: 'parametrosController'
}).
when('/maestrosProgramas/:programaID', {
templateUrl: 'maestrosProgramas.html',
controller: 'maestrosProgramasController'
}).
when('/usuarios', {
templateUrl: 'usuarios.html',
controller: 'usuariosController'
});
}]);
this is my incomeController, where I validate the credentials
angular.module("myApp")
.controller("ingresoController", ['usuariosServices','$scope', '$rootScope', function(usuariosServices,$scope, $rootScope){
$scope.showform2 = true;
$scope.admin = false;
$scope.encuesta = false;
$scope.evaluador = false;
$scope.ingresar = function(usuarioingreso,contrasenaingreso) {
usuariosServices.listarUsuarios().then(function (response){
$scope.usuarios = response.data;
$scope.usuarios.forEach(function (usuario,index){
if(usuario.cedula == usuarioingreso){
if(usuario.contrasena == contrasenaingreso){
$scope.showform2=false;
if(usuario.rol == "Admin"){
$scope.admin=true;
$scope.encuesta = true;
$scope.evaluador = true;
}else
if (usuario.rol != "Admin"){
$scope.encuesta = true;
}
}
}
})
})
}
I would like to know if there is something wrong with the directive, because when I name it in the index, it generates conflicts.