1

¿Alguien tiene idea de cómo puedo abrir el archivo de la imagen con ng-click?

Lo que quiero hacer es que al dar clic en la etiqueta img se abra la imagen sola en el navegador.

{
  "images": [
    "jpg/img.0.jpg",
    "jpg/img.1.jpg"
  ]
}
<img ng-repeat="img in item.images" ng-src="{{img}}" ng-click="?"/>

2 respuestas 2

1

Esto es muy fácil de lograr, sólo envuelve cada elemento img en un elemento a y establece el href de este último a la dirección de la imagen. Cuando hagas click en esta se abrirá la imagen.

angular.module('app', [])
  .controller('ImagesCtrl', function($scope) {
    $scope.item = {
      "images": [
        "http://lorempixel.com/400/200/sports/1",
        "http://lorempixel.com/400/200/sports/2"
      ]
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ImagesCtrl">
  <a ng-href="{{img}}" ng-repeat="img in item.images track by $index">
    <img ng-src="{{img}}">
  </a>
</div>

2
  • Gracias por responder. Al implementarlo cómo me haz explicado al dar clic en vez de llevarme a la imagen me lleva a mi ruta de error 404. Commented el 22 jul. 2016 a las 17:59
  • @AdrianoJosué Quizás porque no estas usando el modo html5 en tu aplicación o porque las url de las imagenes no son absolutas. Me inclino a pensar esto último. Inspecciona la página renderizada y prueba a abrir en una pestaña nueva la url generada en el atributo href para que veas.
    – devconcept
    Commented el 22 jul. 2016 a las 19:12
0

En esta respuesta hacen algo parecido a lo que necesitas. Vamos a adaptar esa respuesta a tu caso específico.

Partiendo de tu definición de la img:

<img ng-repeat="img in item.images" ng-src="{{img}}" ng-click="?"/>

En lugar de definir el ng-click en la img lo quitamos de ahí y ponemos el ng-src con las imagen directamente:

<img id="followbutton" ng-src="{{images.imgURL}}"/>

Lo envolvemos en un markdown <a> que define el ng-click:

<a ng-click="toggleImage(test)"><img id="followbutton" ng-src="{{images.imgURL}}"/></a>

Definimos la función toggleImage() (dentro de tu app.controller):

app.controller('NombreControladora', function CouponCtrl($scope) {
    $scope.followBtnImgUrl = 'jpg/img.0.jpg'
    $scope.test= [{imgUrl: "jpg/img.0.jpg", name:"sdf"}, 
                         {imgUrl: "jpg/img.1.jpg", name: "dfsd"}];


     $scope.toggleImage = function(test) {
         if(test.imgUrl === $scope.followBtnImgUrl) {
             test.imgUrl = merchant.$backupUrl;
         } else {
             test.$backupUrl = merchant.imgUrl;
             test.imgUrl = $scope.followBtnImgUrl;
         }
    };
});

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.