popconfirm 在 table (<td>) 中不起作用

Question

我正在使用带有 playframework 的 scala 应用程序工作，我想在 smart-table 中使用 popover 确认，我安装了 popconfirm ("popconfirm":"0.4. 3") 并且它运行良好，除了 table 正好在 <td>

我的代码有一部分：

<table st-table="topics" st-safe-src="topicList" class="table table-striped">
    <thead>
        <tr>
            <th st-sort="domain">Domain</th>
            <th class="text-center">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="topic in topics">
            <td>{{topic.domain}}</td>
            <td class="text-center">
                <div class="btn-group btn-group-xs">
                    <a  href="javascript:void(0)" data-toggle="tooltip" data-original-title="Edit" class="btn btn-default" ng-click="showTopic(topic)" title><i class="fa fa-pencil"></i></a>

                    <button  href="" type="submit" data-toggle="tooltip" data-original-title="Remove" class="btn btn-danger popconfirm" ng-click="removeTopic(topic)" title><i class="hi hi-remove"></i>
                    </button>
                    <button type="submit" class="btn btn-success popconfirm" href="@routes.Application.index()">Test</button>  
                </div>           
            </td>
                    <button type="submit" class="btn btn-success popconfirm" href="@routes.Application.index()">Work</button>
        </tr>
    </tbody>
</table>
    <script src="@routes.Assets.versioned("temp/js/vendor/jquery-1.12.0.min.js")"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            $(".popconfirm").popConfirm();  
        });
    </script>

确认按钮 "work" 工作正常，但测试不起作用，请帮忙？

Answer 1

上面的代码不起作用，因为它在呈现 ng-repeat（延迟呈现内容）内容之前调用了 $(".popconfirm").popConfirm(); 方法。所以它什么都不做。

为了解决这个问题，您需要创建一个指令，一旦它被 ng-repeat 渲染，就会在 button 上启用 popConfirm 功能。您可以使用指令 link 函数让 angular 编译 element 以调用它的 popConfirm() 方法。

指令

app.directive('popconfirm', function(){
  return {
    restrict: 'C',
    link: function(scope, element){
      element.popConfirm();
    }
  }
})

popconfirm 在 table (<td>) 中不起作用

popconfirm doesn't work in table (<td>)

jquery

html

angularjs

twitter-bootstrap

popover