AngularJS getting the image in modal from thumbnail from JSON

Question

Using AngularJS to get JSON file:

{
 "albumId": 1,
 "id": 1,
 "title": "accusamus beatae ad facilis cum similique qui sunt",
 "url": "http://placehold.it/600/92c952",
 "thumbnailUrl": "http://placehold.it/150/92c952"
},

and display using ng-repeat:

<div ng-repeat="image in images" class="col-xs-2 ">
   <div class="thumbnail">
      <img src="{{ image.thumbnailUrl }}" alt="" ng-click="open()" />

   </div>
</div>

That works. Than I've connected the ui.bootstrap to thumbnails to get modal window opened.

controller:

    app.controller("page3Ctrl",['$scope', '$resource', '$uibModal', function ($scope, $resource,$uibModal) {

    var postingsResource = $resource('http://jsonplaceholder.typicode.com/photos', {});
    $scope.images = postingsResource.query();


    $scope.open = function() {
        var uibModalInstance = $uibModal.open({
            animation: true,
            templateUrl: 'modal.html'

        });
    };

}]);

Works fine. Now, how can I possibly go about displaying the particular image in modal url from thumbnailUrl? They should match.

`ng-repeat` is that a valid HTML5 attribute? or we simply don't need to care any more? — Roko C. Buljan, Apr 03 '17 at 19:57
Use `ng-src` instead of `src`. It will [save you some 404s](https://docs.angularjs.org/api/ng/directive/ngSrc). — creimers, Apr 03 '17 at 20:11
@RokoC.Buljan, it's a custom HTML attribute directive which is built-into and interpreted by the AngularJS framework. — Ben, Apr 03 '17 at 20:51

creimers · Answer 1 · 2017-04-03T21:01:38.873

1

You could add an argument to the open function and pass it the image's url. Like so:

$scope.open = function(imageUrl) {
    var uibModalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'modal.html',
        controller: ModalInstanceCtrl,
        resolve: {
           imageUrl: function () {
             return imageUrl;
           }
        }
    });
}

And so:

<img src="{{ image.thumbnailUrl }}" alt="" ng-click="open(image.url)" />

The parameter would also have to be passed to the modal controller:

var ModalInstanceCtrl = function ($scope, $modalInstance, imageUrl) {
    $scope.imageUrl = imageUrl;
};

More details about passing values to modal controller here: Pass parameter to modal

edited Apr 03 '17 at 21:01

answered Apr 03 '17 at 20:19

creimers

4,975
4
33
55

imageUrl returns correct link, but injection to modal conntroller gives an error: app.controller('page3Ctrl',['$scope', '$resource', '$uibModal', 'imageUrl', function ($scope,$resource,$uibModal,imageUrl) – Szymon Dzumak Apr 03 '17 at 20:53
Error: $injector:unpr Unknown Provider – Szymon Dzumak Apr 03 '17 at 20:57
It would be very helpful if you could create a jsfiddle or a plunker or something like that. – creimers Apr 03 '17 at 20:59
1

You're injecting `imageUrl` in the wrong place. Inject it to the modal's controller. See updated answer. – creimers Apr 03 '17 at 21:07
fixed, but still no idea how to display image in modal. – Szymon Dzumak Apr 03 '17 at 21:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139809/discussion-between-creimers-and-szymon-dzumak). – creimers Apr 03 '17 at 21:30

score 1 · Accepted Answer · answered Apr 03 '17 at 21:06

if you are not using any controller for modal, then you can simply assign $scope as modal's scope and assign the selected image to a scope variable and access it in modal template.

var app = angular.module('app', ['ngResource','ui.bootstrap']);
app.run(function($templateCache){
  $templateCache.put('modal.html', '<div><a ng-click="$close(true)" class="pull-right">&times close</a><img ng-src="{{currentImage.url}}"/></div>');
});
app.controller("page3Ctrl", ['$scope', '$resource', '$uibModal', function($scope, $resource, $uibModal) {

  var postingsResource = $resource('http://jsonplaceholder.typicode.com/photos', {});
  $scope.images = postingsResource.query();

 //no controller for modal
  $scope.open = function(image) {
    $scope.currentImage = image;
    var uibModalInstance = $uibModal.open({
      animation: true,
      scope:$scope,
      templateUrl: 'modal.html'
    });
  };
  
  /*
  //modal has controller
  $scope.open = function(image) {
    var uibModalInstance = $uibModal.open({
      animation: true,
      templateUrl: 'modal.html',
      resolve: {
        image: function(){
          return image;
        }
      },
      controller: function($scope, image){
        $scope.currentImage = image;
      }
    });
  };
  */

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.11/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<div ng-app="app" ng-controller="page3Ctrl">
  <div ng-repeat="image in images.slice(0,10)" class="col-xs-2 ">
    <div class="thumbnail" ng-click="open(image)">
      <img ng-src="{{ image.thumbnailUrl }}" alt="" ng-click="open()" />

    </div>
  </div>
</div>

AngularJS getting the image in modal from thumbnail from JSON

2 Answers2