2

Estoy trabajando con Angular js en una aplicación modular. Cuando un usuario ingresa en la aplicación, ésta determina el numero de embarcaciones que tiene la compañía y en la vista de menús muestra un selector que permite seleccione una de las embarcaciones para administrarla.

<ul class="dropdown-menu animated fadeIn m-t-xs">
  <li>
    <a ng-click="changeBoat(boatInfo)" class="ng-binding">
      182 /  ASTROBOAT
    </a>
  </li>
  <li>
    <a ng-click="changeBoat(boatInfo)" class="ng-binding">
      180 /  START BOAT
    </a>
  </li>
  <li>
    <a ng-click="changeBoat(boatInfo)" class="ng-binding">
      178 /  STORM BOAT
    </a>
  </li>
</ul>

Además en el módulo de dashboard que aparece en la misma pantalla, la aplicación muestra una tabla con la información de todas las embarcaciones. El punto es, cuando la compañía sólo tiene una embarcación, no tienen sentido mostrar el selector ni la tabla. Quiero utilizar otros componentes en esos casos. Estoy pensando en crear una directiva user-if-single-boat, que permita mostrar u ocultar componentes en todas las vistas, algo así:

<ul class="dropdown-menu animated fadeIn m-t-xs" user-if-single-boat> ...
<table class="..." user-if-single-boat> ...

Sé también que podría hacerlo con un ng-if que valide una variable en el $rootScope (<ul class="dropdown-menu animated fadeIn m-t-xs" ng-if='isMultiBoats'>), pero no quisiera usar el $rootScope en sí, teniendo en cuenta que la validación de ese atributo se debe hacer a lo largo de todos los módulos de la aplicación. ¿Qué otra alternativa tengo para ello, o cómo debería ser esta directiva?

1
  • No necesariamente debes utilizar $rootscope para usar ng-if. Si eso es lo que te preocupa, puedes crear una factoría o servicio y declaras un objeto vacío, lo inyectas en el controlador y desde allí trabajas las variables de validación junto a ese objeto vacío de la factoría /servicio. Commented el 1 oct. 2016 a las 12:51

1 respuesta 1

1

La directiva que deberías crear inyectaría un template, el del ul: <ul class="dropdown-menu animated fadeIn m-t-xs"> y cuando uses la directiva añadirías un ng-if o un ng-show o ng-hide según lo que quieras.

Tu directiva quedaría declarada así:

angular.module('tumodulo')
.directive('tuNombreDeDirectiva', function() {
  return {
    templateUrl: 'templates/sets-panel.tmpl.html', // aquí iría tu ul
    controller: 'tuController', // si tienes un controlador con funcionalidad aquí va, sino, borras linea
    replace: true
  };
})

De tal forma que luego para inyectar esa directiva en tu html y además condicionarla para que se muestre o no podría ser:

<ul data-tu-nombre-de-directiva data-ng-show="isShowed"></ul>

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.