Create several similar Angular dialogs without lots of code and templates - angularjs

Question

I'm using the modal module of Angular UI to create dialog boxes. I need to create several boxes which are quite similar. They look roughly like this:
Question?
yes (yellow button), no, cancel
Question?
yes (yellow button), no
cancel
option 1
option 2 (yellow button)
option 3
Is there a smart way I can avoid having to create HTML templates for each individual dialog? In other languages I would do something like "result = showDialog("Question?", ["ok", "cancel"])". I want to avoid putting things in my controller that should really not be there though (e.g. presentation stuff).
By the way, I don't get to decide how the UI looks by the way so they must look like this...

Answer 1

You can create a single template and a single controller that would handle all of these scenarios, just applying different options through the controller:
var ModalInstanceCtrl = function ($scope, $modalInstance, options) {
$scope.options = options;
$scope.yes = function () {
$modalInstance.close('yes');
};
$scope.no = function () {
$modalInstance.dismiss('no');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
Then wrap the call to that modal inside a function that can be called wherever you need it:
$scope.showDialog = function (question, title, showCancel) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
options: function () {
return {
question: question,
title: title,
showCancel: showCancel
};
}
}
});
modalInstance.result.then(function (action) {
$scope.selected = action;
}, function (action) {
$scope.selected = action;
});
};
Then a modal template that displays whatever you need based on the options passed in. Here's a plunker demonstrating the idea: http://plnkr.co/edit/y3c5bz5AXjrNo1XFzMBP
Of course, if you are going to use such a thing throughout your application, it would be wise to abstract it out into a service, rather than have it be a function attached to $scope.

Answer 2

Within a single html template, create multiple buttons, and in conjunction with custom options, show or hide the buttons using ng-show. Example: ng-show="showButton3".