1

Lo que quiero hacer con ng-show es que aparezca este template en una URL que tiene id (/news/:id). Si hay una mejor forma de hacerlo, pues mejor.

app.component('backButtonComponent', {
    template: '<a ng-show=" ? " id="back-button" ng-href="/news"></a>',
    controller: ['$scope','$location','$routeParams',function backButtonComponentCtrl ($scope,$location,$routeParams){
      // ?
    }]
  });

Estilos del template:

#back-button {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 10px;
  left: 10px;
  border-radius: 50%;
  background: url("../svg/back.svg") no-repeat center center;
  background-size: 24px 24px;
  background-color: #3c3f41;
  z-index: 12!important;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); /* 6dp */
}

8
  • Porque no incluyes ese bloque de HTML en la ruta y ya? O es que es parte del layout de tu página?
    – devconcept
    Commented el 26 sept. 2016 a las 12:09
  • @devconcept es un botón que tengo flotando en la parte inferior derecha de la página, específicamente lo tengo en el index.html, si lo incluyo en el template de la ruta en la que quiero que aparezca deja de flotar, ósea el position: fixed; por alguna razón deja de funcionar. Commented el 26 sept. 2016 a las 18:24
  • Creo que la solución correcta es arreglar el problema de estilo en logar de crear una solución compleja para un problema simple. Edita la pregunta y agrega el estilo correspondiente.
    – devconcept
    Commented el 26 sept. 2016 a las 20:36
  • @devconcept eh agregado los estilos, pero no creo que el problema este en ellos. Creo que el problema está en que no se puede colocar un elemento flotante dentro de un template de las rutas de AngularJS. "creo" tampoco que sea experto en AngularJS lol. Commented el 27 sept. 2016 a las 3:26
  • Ya intentaste estilar el botón usando una clase en lugar de por id? el lugar de #back-button escribe .back-button y en tu template algo como <a class="back-button" ng-href="/news"></a>. Si por casualidad tienes otro botón idéntico que has olvidado en tu HTML te dejará de funcionar ya que en HTML es ilegal tener ids repetidos.
    – devconcept
    Commented el 27 sept. 2016 a las 16:58

2 respuestas 2

0

La solución es crear una funcion en el controlador que devuelva verdadero o falso segun el url...Debes usar $location y comparar el url con el que te conviene dentro de esa funcion....luego colocas el ng-show="tuFuncion()"

1
  • No entiendo muy bien cómo la función haría aparecer o desaparecer el template ¿Podrías darme un ejemplo por favor ? Commented el 25 sept. 2016 a las 20:41
0

Puedieras hacer algo asi:

 app.run(['$rootScope', function ($rootScope){
        $rootScope.$on('$stateChangeStart', function(event, toState){
            $rootScope.UrlActive=toState.name;
        });
    }]);

y en tu html

<a ng-show="UrlActive=='miurl'?true:false" id="back-button" ng-href="/news"></a>
1
  • Lo eh implementado y no me funciona, solo se oculta y no se muestra al estar en la url. Commented el 10 oct. 2016 a las 0:13

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.