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:

<div id="cbp-vm" class="activegrid">
     <ul id="product" class="nav-pills nav-stacked rectangle-list" ng-controller="dataImagesWork">
          <li class="col-md-4 my-gallery-animation-home3" ng-repeat="product in images_work">

               <div class="image-container">
                    <div class="image">
                        <img ng-src="../img/projects/{{product.src}}" alt="{{product.name}}" width="322px" height="182px" />
                    </div>
                    <div class="btn-list">
                         <a class="btn btn-xs btn-primary" data-toggle="modal" data-target="#imgModal"><i class="fa fa-search-plus"></i></a>
                         <a class="btn btn-xs btn-primary pull-right" href="{{product.link}}" target="_blank" rel="nofollow"><i class="fa fa-link"></i></a>
                    </div>
                    <div class="info">
                        <label class="title" href=""> {{product.name}} </label>
                    </div>
              </div>
         </li>
     </ul>
</div>

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:

<div id="imgModal" class="modal fade">
    <div class="modal-dialog" ng-controller="dataImagesWork">
        <div class="modal-content" ng-repeat="product in images_work">
            <div class="modal-body">
                 <img ng-src="../img/projects/{{product.src}}" alt="{{product.name}}" width="322px" height="182px" />
            </div>
        </div>
    </div>
</div>

A codepen for ya

Thank you!

@dfsq I would, but I am using bootstrap 4. Bootstrap UI is based on Bootstrap 3 I beleive — LOTUSMS, Mar 13 '16 at 22:44

Hasta Tamang · Answer 1 · 2016-03-13T23:11:16.450

   <body ng-app="angula">
    <div  ng-controller="dataImagesWork">
    <div id="cbp-vm" class="activegrid">
        <ul id="product" class="nav-pills nav-stacked rectangle-list" >
            <li class="col-md-4 my-gallery-animation-home3" ng-repeat="product in images_work">

                <div class="image-container">
                    <div class="image">
                        <img ng-src="../img/projects/{{product.src}}" alt="{{product.name}}" width="322px" height="182px" />
                    </div>
                    <div class="btn-list">
                        <a class="btn btn-xs btn-primary" ng-click="showModal(product)"><i class="fa fa-search-plus"></i></a>
                        <a class="btn btn-xs btn-primary pull-right" href="{{product.link}}" target="_blank" rel="nofollow"><i class="fa fa-link"></i></a>
                    </div>
                    <div class="info">
                        <label class="title" href=""> {{product.name}} </label>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div id="imgModal" class="modal fade">
        <div class="modal-dialog" >
            <div class="modal-content">
                <div class="modal-body">
                    <img ng-src="../img/projects/{{productInModal.src}}" alt="{{productInModal.name}}" width="322px" height="182px" />
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

Your Angular Script

   var app = angular.module('angula', ['ngRoute', 'ui.bootstrap', 'ngAnimate', 'ngMaterial']);

app.controller("dataImagesWork", function($scope) {
    $scope.images_work = [{
        "name": 'PA Liquor Control Board',
        "src": "http://www.lotusmarketingsolutions.com/img/projects/Liquor-Control-Board340.png",
        "link": "#"
    }, {
        "name": 'PA Provider Self Service',
        "src": "http://www.lotusmarketingsolutions.com/img/projects/Provider-Services-of-PA340.png",
        "link": "#"
    }, {
        "name": 'Job Gateway',
        "src": "http://www.lotusmarketingsolutions.com/img/projects/JobGateway340.png",
        "link": "#"
    }];
    $scope.productInModal = {};
    $scope.showModal = function(product){
        $scope.productInModal = product;

        console.log($scope.productInModal);
        $('#imgModal').modal('show');

    }
});

Add ng-click to trigger modal. Then in your controller make a temporary variable to store that productInModal. On click show the modal with the product selected

Extremely bad advice, totally wrong approach. You are suggesting using jQuery straight from Angular controller which is very bad practice and for good reason. — dfsq, Mar 13 '16 at 22:38
Please provide your reasoning and please down vote if this is wrong. Thanks — Hasta Tamang, Mar 13 '16 at 22:39
I don't downvote, but you should never use direct DOM manipulations (including jQuery plugins) from controller. The reason is that: 1). it's not guarantied that `$('#imgModal')` will be available (depends on HTML structure), but it's not reliable. 2). business layer becomes coupled to presentation, which is not good. — dfsq, Mar 13 '16 at 22:45
Also take a look at this thread: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — dfsq, Mar 13 '16 at 22:46
Reading the console(log) the data is being transferred but the image is not being displayed :( not sure why. On the other hand, @dfsq, since you have a different idea, would you care offer a solution. I know you suggested bootstrap-ui but I am using Bootstrap 4 for most of the framework functionality. Bootstrap-UI is there supporting other features. I know I should pick one, and I will :) — LOTUSMS, Mar 13 '16 at 22:52
Please check the codepen again http://codepen.io/anon/pen/WwGdbL modal was outside the controller so i ve added a new div with the controller dataImagesWork. I understand this is a rubbish solution you may want to use angular UI or something thanks.. — Hasta Tamang, Mar 13 '16 at 23:07
Thank @HastaTamang. I wish I could do it the correct way, I implemented a ui-Modal in my code but I'm having a hard time making it work. But at least this worked. I'll use this for now until I figure out how to make correct way work. Thanks. — LOTUSMS, Mar 14 '16 at 01:05

score 1 · Accepted Answer · answered Mar 13 '16 at 23:27

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:

<a class="btn btn-xs btn-primary" ng-click="viewProduct(product)">
    <i class="fa fa-search-plus"></i>
</a>

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

Thanks man. I just saw this answer. I'll make this work. It's not finding the images but I trust it will work. Am I supposed to make an imgModal.html view and add the images there? How? in json? — LOTUSMS, Mar 14 '16 at 01:14
HA! Got it to work with your code, and I learned! Good stuff! Thank you — LOTUSMS, Mar 14 '16 at 13:40

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

2 Answers2