Question

在我的应用程序中，我在某些条件下点击按钮（ng-click）时会调用模态

我的HTML

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

我的控制器

vm.change = function () {
    if(vm.modifiedBaseline &&  vm.modifiedBaselineToBeCommented){
    vm.modalFlag = true;
    } 
    else{
         st1;
         st2;
    }
   vm.modalFlag = false;
}

我的模态HTML

     <div data-modal id='add-save-all-alert-modal' class='bx--modal bx--
modal-tall' tabindex='-1'>
<div class='bx--modal-inner' style="width: 40%;margin-bottom: 400px;">
<div class="bx--modal-container">
  <button class='bx--modal__close' type='button' data-modal-close>
     <svg class='bx--modal__close--icon'>
    <use xlink:href='./././images/carbon-theme-ui/bluemix-icons.svg#close'></use>
  </svg>
</button>

<div class='bx--modal-content'>
  <p>Save Modified Baselines</p>
</div>

 <div class='bx--modal__buttons'>
  <div class='bx--modal__buttons-container'>
    <button class='bx--btn--secondary' type='button' data-modal-close>Cancel</button>
    <button class='bx--btn' type='button' data-modal-close>Save</button>
  </div>
</div>
</div>
</div>

我想根据控制器中的if条件控制模态的打开和关闭。

如何控制控制器内的数据模态目标属性以打开和关闭模态？

帮助我解决这个问题，坚持不懈......谢谢！

Answer 1

尝试从html中删除data-modal-target并使用click函数显示或隐藏模态

vm.change = function () {
    if(vm.modifiedBaseline &&  vm.modifiedBaselineToBeCommented){
     vm.modalFlag = true;
     $('#add-save-all-alert-modal').modal('show');
    } 
    else{
         st1;
         st2;
    }
   vm.modalFlag = false;
}

请参阅docs以无条件地从js而不是html打开模态

Answer 2

嗯，不建议将Jquery与angular一起使用。

在这种情况下，我建议使用bootstrap创建一个本机HTML模式，并通过变量和ngClass控制display css属性

否则你可以试试角度UI

Angular UI

我可以使用Angular JS在某些条件下（没有任何引导服务）使用HTML中的调用属性控制控制器中的模态吗？

2 个答案: