onApprove 和 onDeny 未在模态中触发 - 语义 ui

Posted 2023-02-24

【中文标题】onApprove 和 onDeny 未在模态中触发 - 语义 ui

【英文标题】：onApprove and onDeny not triggered in modal - semantic ui

【发布时间】：2014-03-10 02:17:49

【问题描述】：

当我显示我的模式时，会自动调用 onApprove 事件。我怎样才能阻止这个？ 我的代码如下

<div class="item">
    <div class="content">
       <a href="#" ng-click="showItemPanel()">Deactivate Account</a>
       <div id='showItemModal' class='ui modal'>
       <i class="close icon"></i>
       <div class="header">
         Deactivate User
       </div>
       <div class="content">
       <form class="ui form" name="ItemModalForm">
          <div class="field">
            You want to go to shopping?                 
          </div>
       </form>
       </div>
       <div class="actions">
        <div class="ui tiny button">Cancel</div>
        <div class="ui tiny green button" ng-click="showItems()">De-Activate</div>
        </div>
       </div>
   </div>

controller.js

$scope.showItemPanel= function() 
            var modalElem= $('#showItemModal').modal('setting', 
            closable  : false,
            onDeny    : function()
              window.alert('Wait not yet!');
              return false;
            ,
            onApprove : itemPanelOpen()
            );
          modalElem.modal('show');           
        
        function itemPanelOpen()
        
            console.log(user.name + " can now shop!");
        

对我来说，只要调用 showItemPanel 函数，itemPanelOpen 函数也会自动调用。请让我知道我哪里出错了。

【参考方案1】：

我今天遇到了这个问题，找出按钮的定义应该是

<div class="actions">
        <div class="ui tiny button deny">Cancel</div>
        <div class="ui tiny green button approve">De-Activate</div>
</div>

通过按钮类属性中的“批准”，onApprove 和 onDeny 事件可以工作。

你可以找到模态DOM selector的语义UI文档：

selector    : 
  close    : '.close, .actions .button',
  approve  : '.actions .positive, .actions .approve, .actions .ok',
  deny     : '.actions .negative, .actions .deny, .actions .cancel'

我花了几个小时来弄清楚事件没有被触发，并且觉得这里的文档写得不太好。

【参考方案2】：

onApprove : itemPanelOpen()

末尾的括号表示您要调用该函数，并将onApprove 设置为itemPanelOpen() 的计算结果。

由于您只想引用该函数，因此请省略括号：

onApprove: itemPanelOpen

这是因为，在 javascript 中，函数是第一类对象。您可以在 Mozilla 开发者网络的Functions and function scope 中阅读更多关于它们的信息。

【讨论】：

我已经改变了我的代码，如下所示。现在我发现 onApprove 甚至没有被触发。我应该手动将“取消”和“停用”按钮添加到控制器中的功能吗？

$scope.showItemPanel= function() var modalElem= $('#showItemModal').modal('setting', closable : false, onDeny : function() window.alert('还没等！'); return false; , onApprove : function() console.log("On approval called"); ); modalElem.modal('show'); function itemPanelOpen() console.log(user.name + " 现在可以购物了！");

您用于模态对话框的库是什么？是否支持onApprove 回调/

我刚刚在我的 Angular js 项目中完全调用了语义 ui 库文件夹

更具体地说，我从打包文件夹中添加了 semantic.css。我没有使用角度引导用户界面。

【参考方案3】：

不确定您是否仍在寻找答案，但您需要在按钮中添加“肯定”或“批准”或“确定”类。根据documentation：“Modals 将自动将批准拒绝回调绑定到任何肯定/批准、否定/拒绝或确定/取消按钮。”

 <div class="actions">
    <div class="ui tiny button cancel">Cancel</div>
    <div class="ui tiny green button ok" ng-click="showItems()">De-Activate</div>
 </div>

可能是以下任何一种

肯定/批准/好的

会起作用的。

【参考方案4】：

不要添加单词'settngs'

$('.mini.modal.delete').modal(
    onApprove : function()alert("delete")
).modal('show');