how can I incorporate ui-bootstrap modal in my angular 1.5 app?

Question

My basic app is basically a bunch of flowers (images of flowers) and you can add the flowers to a flower pot..

I'm trying to incorporate modals into the app, so that if I click on a flower photo, a modal will show up with some information about the flower (name, color).

Here's how I am thinking of it:

Click a flower -> model.showDetails(flower) -> display modal template with that flower's name and color

So, in my template, I have the following inside of the repeater:

<img ng-src="{{flower.image}}" ng-click="model.showDetails(flower)">

In my

component.js

, I have the following method, and this is where I'm having trouble :(

model.showDetails = function(flower) {

  var modalInstance = $uibModal.open({

    templateUrl: "flower-details/flower-details.html",

  })

}

How can I pass the flower name and color into the markup in

flower-details.html

?

<h1>Flower Information</h1>

<a ng-click="model.dismiss()">X</a>

<div>

  <p>{{model.flower_name}}</p>

  <p>{{model.flower_color}}</p>

</div>

Thanks

Answer 1

You could pass the data to modal from resolve of modal popup. Thereafter you need to inject that flower resolve into the controller factory function by which you can receive value of current flower. And then while using variable on HTML you could prefix them with modalScope. to reference them correctly.

Code

model.showDetails = function(flower) {
  var modalInstance = $uibModal.open({
    templateUrl: "flower-details/flower-details.html",
    resolve: {
       flower: function(){
          return flower; //resolve function returning flower.
       }
    },
    controllerAs: 'modalScope',
    controller: function(flower){
       var modalScope = this;
       modalScope.flower = flower; //got the flower from resolve.
    }
  })
}