How to add a condition for a carbon design system modal using Angular JS?

Question

I have a modal that appears when a button is clicked - however I want the modal ONLY to appear when certain conditions are met

HTML Code

 <button type="button" class="btn btn-outlined" ng-click="vm.changeYear(vm.currentYear+1)" data-modal-target="#add-save-all-alert-modal"></button>

i want the modal to be invoked only for certain conditions from my controller

Controller.js

 vm.changeYear = function (year) {
    if(vm.modifiedBaseline &&  vm.modifiedBaselineToBeCommented){
        statement1;
        statement2;
 }
 else {
  statement3;
 }

I want the modal to be invoked when if condition is satisfied and along side both the statements 1 and 2 to be executed.....If if condition is false then without invoking(displaying) the modal i want to execute statement3.

I don't want button to be disabled and without using any bootstrap services around...How will i open a modal by having conditions injected?

I'm badly stuck at this point

Answer 1

Take a look at the angular-ui and their $modal provider.

See http://angular-ui.github.io/bootstrap/#/modal

Invoke the modal from your controller showDetails(item) function by using the $modal service. Remove the data-modal-target="#add-save-all-alert-modal" from the button and extend your controller function.

Inject the $modal service into your controller's definition and use af following

vm.changeYear = function (year) {
    if(vm.modifiedBaseline &&  vm.modifiedBaselineToBeCommented){
       // open modal here
       openModal();
    } else {
      statement3;
    }
}

function openModal(){
    var modalInstance = $modal.open({
        templateUrl: 'modaltemplateurl.html',
        controller: 'ControllerIfNeeded',                       
        ...
    });

    modalInstance.result.then(function () {
        // ok
    }, function () {
        // dismiss
    });
}