onApprove和onDeny没有在模态语义ui中触发

Question

当我显示我的模态时，会自动调用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函数也会自动调用。请让我知道我哪里出错了。

Answer 1

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

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

通过按钮的class属性中的“approve”，onApprove和onDeny事件可以正常工作。

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

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

我花了几个小时来搞清楚没有触发的事件，并觉得这里写的文件不是很好。

Answer 2

onApprove : itemPanelOpen()

末尾的括号表示您想要调用该函数，并将onApprove设置为itemPanelOpen()求值的任何值。

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

onApprove: itemPanelOpen

这是因为，在javascript中，函数是第一类对象。您可以在Mozilla Developer Network的Functions and function scope上阅读更多相关信息。

Answer 3

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

 <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>

可能是以下任何一种

积极/赞成/确定

将工作。

Answer 4

不要添加'设置'字样

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