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
<img ng-src="{{flower.image}}" ng-click="model.showDetails(flower)">
component.js
model.showDetails = function(flower) {
var modalInstance = $uibModal.open({
templateUrl: "flower-details/flower-details.html",
})
}
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>
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.
}
})
}