user1354934 user1354934 - 2 months ago 10x
Javascript Question

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

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
, I have the following method, and this is where I'm having trouble :(

model.showDetails = function(flower) {
var modalInstance = ${
templateUrl: "flower-details/flower-details.html",

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

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



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.


model.showDetails = function(flower) {
  var modalInstance = ${
    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.