语义 UI 弹出窗口在 angularjs 指令中不起作用答案

【问题标题】：Semantic UI Popup not working inside angularjs directive语义 UI 弹出窗口在 angularjs 指令中不起作用
【发布时间】：2016-02-03 02:01:37
【问题描述】：

刚刚遇到一个问题，我正在使用语义 UI 来显示弹出窗口，但是如果我在驻留在 ng-view 指令中的任何模板内编写代码，它就不起作用，但如果我将它写在ng-view 指令，代码有什么问题吗？

这行得通

<body>
    <div class="ui container">
        <div ng-view></div>
        <div class="ui teal button" data-title="Using click events" data-content="Clicked popups will close if you click away, but not if you click inside the popup">Click Me</div>
    </div>

    <script>
        $('.ui.teal.button').popup({
            on: 'click'
        });            
    </script>
</body>

这行不通

<!-- index.html -->
<body>
    <div class="ui container">
        <div ng-view></div>
    </div>
</body>

<!--sample.html -->
<div class="ui teal button" data-title="Using click events" data-content="Clicked popups will close if you click away, but not if you click inside the popup">Click Me</div>

 <script>
    $('.ui.teal.button').popup({
        on: 'click'
    });            
 </script>

【问题讨论】：

好吧，据我所知，将任何不是 head 或 body 标记的内容作为 HTML 标记的直接子级是不好的做法。（参考stackoverflow.com/a/13470905/2738980）

标签： javascript jquery angularjs semantic-ui

【解决方案1】：

当您遇到必须使用指令同时使用语义ui jquery初始化的情况时，您要做的就是初始化指令中的语义ui对象。

所以你要做的第一件事就是在 ng-view 指令中添加你的按钮。然后创建一个新指令“showPopUp”。

<body>
<div class="ui container">
    <div ng-view showPopUp>
      <div class="ui teal button" data-title="Using click events" data-content="Clicked popups will close if you click away, but not if you click inside the popup">Click Me</div>
    </div>
</div>

<script>

</script>

这是您必须添加到模块中的指令。

theNameOfYourModule.directive( 'showPopUp', function(){
return{
    restrict: 'A',
    link: function(scope, elem, attrs) {
       $('.ui.teal.button').popup({
        on: 'click'
       });   
    }
}});

【讨论】：

【解决方案2】：

自语义 ui 2.2 以来，只有 css 的弹出窗口可用：

<div>data-tooltip="Add text here"</div>

http://semantic-ui.com/introduction/new.html

【讨论】：