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

Question

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

HTML代码

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

我希望仅在某些情况下从我的控制器调用模式

Controller.js

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

我希望在满足条件时调用模态并同时执行语句 1 和 2.....如果条件为假则不调用（显示）我想要的模态执行语句3.

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

我现在卡的很厉害

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 服务注入到您的控制器定义中并使用以下

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

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

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

javascript

html

angularjs

modal-dialog

carbon-design-system