I'm trying to show information that I inject from a factory to the controller , but it only shows me the information in the first tab, in the others it doesn't even show me the default template .
The code is the following:
offices.html
<ion-header-bar class="bar-balanced" align-title="center">
<volver-menu></volver-menu>
<p class="title">Oficinas</p>
</ion-header-bar>
<ion-tabs class="tabs-striped tabs-top tabs-balanced">
<ion-tab title="Programas" href="#/oficinas/jefaturas">
<ion-nav-view name="jefaturas-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Facultades" href="#/oficinas/decanaturas">
<ion-nav-view name="decanaturas-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Admon" href="#/oficinas/admon">
<ion-nav-view name="admon-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
headquarters.html
<ion-content class="color-tabs">
<div class="list list-borderless card color-tabs" ng-repeat="programa in oficinas.departamentos">
<div class="item item-icon-left">
<i class="icon ion-ios-person-outline"></i> {{programa.director}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-briefcase-outline"></i> {{programa.oficina}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-telephone-outline"></i> {{programa.telefono}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-email-outline"></i> {{programa.correo}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-clock-outline"></i> Horario de atencion
</div>
</div>
</ion-content>
decanaturas.html
<ion-content>
<div class="list list-borderless card color-tabs" ng-repeat="decanatura in oficinas.facultades>
<div class="item item-icon-left">
<i class="icon ion-ios-person-outline"></i> {{decanatura.director}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-briefcase-outline"></i> {{decanatura.oficina}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-telephone-outline"></i> {{decanatura.telefono}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-email-outline"></i> {{decanatura.correo}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-clock-outline"></i> Horario de atencion
</div>
</div>
</ion-content>
admin.html
<ion-content>
<div class="list list-borderless card color-tabs" ng-repeat="admon in oficinas.administracion">
<div class="item item-icon-left">
<i class="icon ion-ios-person-outline"></i> {{admon.director}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-briefcase-outline"></i> {{admon.oficina}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-telephone-outline"></i> {{admon.telefono}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-email-outline"></i> {{admon.correo}}
</div>
<div class="item item-icon-left">
<i class="icon ion-ios-clock-outline"></i> Horario de atencion
</div>
</div>
</ion-content>
offices.js
angular.module('modulo_Oficina', ['ionic'])
.controller('iniciarTabs', iniciarTabs)
.factory('informacionTabs', informacionTabs);
iniciarTabs.$inject = ['$scope', 'informacionTabs'];
function iniciarTabs($scope, informacionTabs) {
var Departamentos, Facultades, Administracion, estado;
informacionTabs.salirApp();
Departamentos = informacionTabs.infoDepartamentos();
Facultades = informacionTabs.infoDecanaturas();
Administracion = informacionTabs.infoAdmon();
$scope.oficinas = {
departamentos: Departamentos,
facultades: Facultades,
administracion: Administracion
}
}
informacionTabs.$inject = ['$ionicHistory', '$ionicPlatform', '$state'];
function informacionTabs($ionicHistory, $ionicPlatform, $state) {
return {
obtenerVista: function() {
var vista;
vista = $ionicHistory.currentStateName();
return vista;
},
salirApp: function() {
var BackButton = 0;
var atrasMenu;
atrasMenu = $ionicHistory.backView();
$ionicPlatform.onHardwareBackButton(function() {
if ($ionicHistory.currentStateName() == 'oficinas.jefaturas' || $ionicHistory.currentStateName() == 'oficinas.decanaturas' || $ionicHistory.currentStateName() == 'oficinas.admon') {
if (atrasMenu.stateName == "menuestu") {
$state.go('menuestu');
} else {
$state.go('menuprof')
}
}
});
},
infoDepartamentos: function() {
var programas;
programas = [{
director: 'Alvaro Oñate',
oficina: 'Dep. de Ing. de Sistemas',
telefono: 5849233,
correo: '[email protected]'
}, {
director: 'Ada Almenares',
oficina: 'Dep. de Derecho',
telefono: 5546706,
correo: '[email protected]'
}, {
director: 'Josefina Cuello',
oficina: 'Dep. de Sociologia',
telefono: 5846706,
correo: 'sociologí[email protected]'
}, {
director: 'Iranis Urbina',
oficina: 'Dep. de Idiomas',
telefono: 5850296,
correo: '[email protected]'
}, {
director: 'Ineris Cuello',
oficina: 'Dep. de Arte y folclor',
telefono: 585045,
correo: '[email protected]'
}, {
director: 'Doris Celchar',
oficina: 'Dep. de Enfermeria',
telefono: 5848935,
correo: 'enfermerí[email protected]'
}];
return programas;
},
infoDecanaturas: function() {
var decanaturas;
decanaturas = [{
director: 'Efrain Quintero',
oficina: 'Dec. de Bellas Artes',
telefono: 5850411,
correo: '[email protected]'
}, {
director: 'Jaime Maestre',
oficina: 'Dec. de Ciencias de la educación',
telefono: 5849456,
correo: '[email protected]'
}, {
director: 'Nancy Hernandez',
oficina: 'Dec. de Salud',
telefono: 5850464,
correo: '*'
}];
},
infoAdmon: function() {
var admon;
admon = [{
director: 'Norberto Diaz',
oficina: 'Cefontev',
telefono: 3145357278,
correo: '*'
}, {
director: 'Averiguar',
oficina: 'Sala de profesores',
telefono: 5847128,
correo: '*'
}];
}
};
}
routes
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
//Ingreso
.state('login', {
url: '/login',
templateUrl: "Templates/login.html",
controller: "formulario"
})
.state('Loading', {
url: '/loading',
templateUrl: "Templates/loading.html"
});
//Estudiante
.state('menuestu', {
url: '/menuestu',
templateUrl: "Templates/Estudiante/menuestu.html",
controller: "borrarHistorial"
})
.state('perfilestu', {
url: '/perfilestu',
templateUrl: "Templates/Estudiante/perfilestu.html",
controller: "mostrarPerfilEstu"
})
.state('horarioestu', {
url: '/horarioestu',
templateUrl: "Templates/Estudiante/horarioestu.html",
controller: "mostrarHorarioEstu"
})
.state('calificaciones', {
url: '/calificaciones',
templateUrl: "Templates/Estudiante/calificaciones.html",
controller: "mostrarNotasEstu"
})
.state('calendarioestu', {
url: '/calendarioestu',
templateUrl: "Templates/Estudiante/calendarioestu.html"
})
//Profesor
.state('menuprof', {
url: '/menuprof',
templateUrl: "Templates/Docente/menuprof.html",
controller: "borrarHistorial"
})
.state('perfilprof', {
url: '/perfilprof',
templateUrl: "Templates/Docente/perfilprof.html",
controller: "mostrarPerfilProf"
})
.state('horarioprof', {
url: '/horarioprof',
templateUrl: "Templates/Docente/horarioprof.html",
controller: "mostrarHorarioProf"
})
.state('grupos', {
url: '/grupos',
templateUrl: "Templates/Docente/grupos.html",
controller: "mostrarGruposProf"
})
.state('calendarioprof', {
url: '/calendarioprof',
templateUrl: "Templates/Docente/calendarioprof.html"
})
.state('oficinas', {
url: '/oficinas',
abstract: true,
templateUrl: "Templates/Oficinas/oficinas.html"
})
.state('oficinas.jefaturas', {
url: "/jefaturas",
views: {
'jefaturas-tab': {
templateUrl: "Templates/Oficinas/jefaturas.html",
controller: "iniciarTabs"
}
}
})
.state('oficinas.decanaturas', {
url: "/decanaturas",
views: {
'decanaturas-tab': {
templateUrl: "Templates/Oficinas/decanaturas.html",
controller: "iniciarTabs"
}
}
})
.state('oficinas.admon', {
url: "/admon",
views: {
'admon-tab': {
templateUrl: "Templates/Oficinas/admon.html",
controller: "iniciarTabs"
}
}
});
};
First of all I have to clarify that it is generally a good idea to have a different controller for each tab because it helps reduce the amount of code for each controller but there are cases where the information is the same (eg everything arrives in a single ajax call and the tabs help to classify said information or it is a very simple app that has a lot of static content, etc).
There are two ways to achieve it
First variant:
Use the CSS tabs instead of the tabs directive . The results of using both components are similar but not 100% identical.
The property
$scope.currentTab
is in charge of controlling which is the active tab using ng-if to hide and show the corresponding list.This variant is only useful in small applications since it has some problems that I will list below.
'active'
conditionally with ng-class .In this demo you can see the results. As you can see, I only use one instance of the controller and therefore only one
$scope
.Second variant (recommended)
Use a single state and modify the current tab by passing it a parameter instead of declaring multiple states with different urls. The url of said state could be something like
/vista?tab=:nombretab
or/vista/:nombretab
In this demo a parameter is used to generate a url
http://plnkr.co/edit/aCkXLhdcPmEB043mKsfL?p=preview
and in this the query is used achieving the same effect
http://plnkr.co/edit/jGEqpfkl5M76lbCSCp17?p=preview
De nuevo en estos ejemplos se usa una sola instancia de controller y por lo tanto un solo
$scope
.