CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
user1354934
user1354934

Reputation: 8841

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

Upvotes: 1

Views: 118

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

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.
    }
  })
}

Upvotes: 1

Related Questions