4

Estoy tratando de mostrar información que inyecto desde un factory al controller, pero solo me muestra la información en el primer tab, en los otros incluso no me muestra el template por defecto.

El código es el siguiente:

oficinas.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>

jefaturas.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>

admon.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>

oficinas.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: '*'
            }];   
        }    
    };    
}

rutas

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"
            }
        }
    });  

};

4
  • ¿Puedes añadir a la pregunta la definición de los estados?
    – jjimenez
    Commented el 21 jun. 2016 a las 14:02
  • Pues @rnd estan alli en el iff que esta dentro de la funcion del factory Commented el 21 jun. 2016 a las 20:33
  • Lo que falta es donde defines los estados del uirouter, ahí solo veo que cambias de estado.. Estoy mal ? Es que estoy con el cel y es medio complicado. :) Commented el 22 jun. 2016 a las 2:13
  • @rnd ya estan las rutas agregadas Commented el 22 jun. 2016 a las 4:23

1 respuesta 1

1

Primero que todo tengo que aclararte que por lo general es buena idea tener un controller diferente por cada tab porque ayuda a reducir la cantidad de código de cada controller pero hay casos que la informacion es la misma(ej todo llega en una sola llamada ajax y los tabs ayudan a clasificar dicha información o es una app muy sencilla que tiene mucho contenido estático, etc).

Hay dos formas de lograrlo

Primera variante:

Usar los tabs de CSS en lugar de la directiva de los tabs. Los resultados de usar ambos componentes son similares pero no 100% idénticos.

La propiedad $scope.currentTab es la encargada de controlar cual es la pestaña activa usando ng-if para ocultar y mostrar la lista correspondiente.

Esta variante sólo es útil en aplicaciones pequeñas ya que tiene algunos problemas que te enumero a continuación.

  • Hay que manejar muchos factores manualmente como cuál es el tab activo agregandole la clase 'active' condicionalmente con ng-class.
  • La url del navegador no se actualiza al cambiar de pestaña por lo que si tu página se refresca el navegador "olvida" cual es el tab activo.

En este demo puedes ver los resultados. Como puedes comprobar sólo uso una instancia del controller y por lo tanto un sólo $scope.

angular.module('app', ['ionic'])
  .controller('IniciarCtrl', function($scope, info, $stateParams) {
    $scope.currentTab = 'programas';
    $scope.programas = info.programas;
    $scope.decanaturas = info.decanaturas;
    $scope.admon = info.admon;
  })
  .factory('info', function() {
    return {
      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]'
      }],
      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: '*'
      }],
      admon: [{
        director: 'Norberto Diaz',
        oficina: 'Cefontev',
        telefono: 3145357278,
        correo: '*'
      }, {
        director: 'Averiguar',
        oficina: 'Sala de profesores',
        telefono: 5847128,
        correo: '*'
      }]
    };
  });
<script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
<link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet">
<div ng-app="app" ng-controller="IniciarCtrl">
  <ion-header-bar class="bar-balanced" align-title="center">
    <p class="title">Oficinas</p>
  </ion-header-bar>
  <div class="tabs tabs-striped tabs-top tabs-balanced">
    <a class="tab-item" ng-class="{'active': currentTab === 'programas'}" ng-click="currentTab = 'programas'">
      Programas
    </a>
    <a class="tab-item" ng-class="{'active': currentTab === 'decanaturas'}" ng-click="currentTab = 'decanaturas'">
      Facultades
    </a>
    <a class="tab-item" ng-class="{'active': currentTab === 'admon'}" ng-click="currentTab = 'admon'">
      Admon
    </a>
  </div>
  <ion-content class="has-tabs-top color-tabs">
    <div class="list list-borderless card color-tabs" ng-repeat="programa in programas" ng-if="currentTab === 'programas'">
      <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>
    <div class="list list-borderless card color-tabs" ng-repeat="decanatura in decanaturas" ng-if="currentTab === 'decanaturas'">
      <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>
    <div class="list list-borderless card color-tabs" ng-repeat="admon in admon" ng-if="currentTab === 'admon'">
      <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>
</div>

Segunda variante (recomendada)

Usar un solo estado y modificar el tab actual pasandole un parametro en lugar de declarar varios estados con urls diferentes. La url de dicho estado podría ser algo como /vista?tab=:nombretab o /vista/:nombretab

En este demo se usa un parámetro para generar una url

http://plnkr.co/edit/aCkXLhdcPmEB043mKsfL?p=preview

y en este se usa la query logrando el mismo efecto

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.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.