Bootstrap Modal with Angular pulling from a controller containing an image array

Question

I have an Angular controller that holds an array of images, url, and a string. At the moment I am using this controller with an ng-repeat to build a repeater that displays these images in a gallery type feature. I coded a bootstrap modal attached to the image button that once clicked it opens the modal to show the image in a lightbox imitation. All that works except, the image is not coming out unless I call the ng-repeat. The problem with that is that I get all images inside modal (as the ng-repeat so faithfully does). My challenge here is, I want only the image that is being clicked on to be the one that appears in the modal. How can I modify my code to do this?

Here is my code:


     
          

               
                    
                        
                    
                    
                         
                         
                    
                    
                         {{product.name}}

The Controller:

app.controller("dataImagesWork", function ($scope) {
$scope.images_work = [
      {
          "name": 'PA Liquor Control Board',
          "src": "Liquor-Control-Board340.png",
          "link": "http://www.finewineandgoodspirits.com/webapp/wcs/stores/servlet/StoreCatalogDisplay?storeId=10051&catalogId=10051&langId=-1"
      },
      {
          "name": 'PA Provider Self Service',
          "src": "Provider-Services-of-PA340.png",
          "link": 'https://www.pelican.state.pa.us/provider/default.aspx?TYPE=33554433&REALMOID=06-ccc2a1cb-0683-440f-bfa6-cad042af12ba&GUID=&SMAUTHREASON=0&METHOD=GET&SMAGENTNAME=-SM-ZW9pIAMntaN%2bR%2fAG5q4UUzXVDz%2bKoMG2pXXJCs1re8tkRKCZKtgqJypoW9Af5ilo&TARGET=-SM-https%3a%2f%2fwww%2epelican%2estate%2epa%2eus%2fprovider%2fui%2fhome%2easpx#'
      },
      {
          "name": 'Job Gateway',
          "src": "JobGateway340.png",
          "link": 'https://www.jobgateway.pa.gov/jponline/Admin/Common/Portal.aspx?w@cIRFbHc_kyIfEUDPqYpUspb3u_@dnsvVOXen8isTEcdYg4grazpGUr2rtw4QN@odjSSGi8RwBm4_nraX__ITaRZJT8HYWbn3TgGPFcA0A-6xUQEkG_y@pHEMFmjDEEwSppJHEDfIGrVG6yQ4mCf4aazFA4QpEE'
      },
      {
          "name": 'Keystone Canine Rescue',
          "src": "KeystoneCanineRescue340.png",
          "link": 'http://www.keystonecaninerescue.org/'
      },
      {
          "name": 'Thrifty Elegance',
          "src": "ThriftyElegance340.png",
          "link": 'http://www.thriftyelegancepa.com/'
      },
      {
          "name": 'Team Balance Harrisburg',
          "src": "Team-Balance-Harrisburg340.png",
          "link": 'http://www.teambalanceharrisburg.com/'
      },
      {
          "name": 'Witmers Feed & Grain',
          "src": "Witmers340.png",
          "link": 'http://www.witmersfeed.com/'
      },
      {
          "name": 'R & J Dairy Consulting',
          "src": "randjdairy340.png",
          "link": 'http://www.randjdairy.com/'
      },
      {
          "name": 'Modern Vintage 1005',
          "src": "MV1005340.png",
          "link": 'http://www.modernvintage1005.com/'
      },
      {
          "name": 'Feed Commodities',
          "src": "FeedCommodities340.png",
          "link": 'http://www.feedcommodities.com/'
      },
      {
          "name": 'VisionSpec Home',
          "src": "VisionSpecHome340.png",
          "link": 'http://www.visionspechome.com/'
      },
      {
          "name": 'Nick & Sons Contracting',
          "src": "Nick_Sons340.png",
          "link": 'http://www.nickandsonsllc.com/'
      }];

 });

And the modal:

A codepen for ya

Thank you!

dfsq · Accepted Answer

You should not use Bootstrap jQuery plugins directly from controller. Instead use Bootstrap UI $uibModal service which brings modal functionality smoothly.

So first of all, remove jQuery and bootstrap js tags, you don't need them. After that in your controller implement viewProduct function:

app.controller("dataImagesWork", function($scope, $uibModal) {

    $scope.viewProduct = function(product) {
        $uibModal.open({
            scope: $scope,
            templateUrl: 'path/to/templates/imgModal.html',
            resolve: {product: product},
            controller: function(product, $scope) {
                $scope.product = product;
            }
        });
    };

    // ...
});

and use this function in template with ngClick:

Demo: http://codepen.io/anon/pen/aNmEyp?editors=1010

Bootstrap Modal with Angular pulling from a controller containing an image array

Answers (2)

Related Questions