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
– LOTUSMS, Commented Mar 13, 2016 at 22:44

dfsq · Accepted Answer · 2016-03-13 23:27:15Z

1

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

answered Mar 13, 2016 at 23:27

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LOTUSMS Over a year ago

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 Over a year ago

HA! Got it to work with your code, and I learned! Good stuff! Thank you

Hasta Tamang · Accepted Answer · 2016-03-13 23:11:16Z

1

   <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

edited Mar 13, 2016 at 23:11

answered Mar 13, 2016 at 22:36

Hasta Tamang

2,2981 gold badge20 silver badges17 bronze badges

8 Comments

dfsq Over a year ago

Extremely bad advice, totally wrong approach. You are suggesting using jQuery straight from Angular controller which is very bad practice and for good reason.

Hasta Tamang Over a year ago

Please provide your reasoning and please down vote if this is wrong. Thanks

dfsq Over a year ago

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 Over a year ago

Also take a look at this thread: stackoverflow.com/questions/14994391/…

LOTUSMS Over a year ago

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 :)

|

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related