如何使用 Angular JS 为碳设计系统模态添加条件

Question

我有一个在单击按钮时出现的模态 - 但是我希望模态仅在满足某些条件时才出现

网页代码

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

我希望仅在控制器的某些条件下调用模态

控制器.js

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

我希望在满足条件时调用模态，并且与要执行的语句 1 和 2 一起执行.....如果条件为 false，则无需调用(显示(模态，我就要执行语句 3。

我不希望按钮被禁用并且不使用任何引导服务......如何通过注入条件来打开模态？

我在这一点上被严重困住了

Answer 1

看看angular-ui及其$modal提供程序。

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

使用 $modal 服务从控制器showDetails(item)函数调用模式。从button上卸下data-modal-target="#add-save-all-alert-modal"并扩展控制器功能。

将$modal服务注入控制器的定义并使用 af 跟随

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