Question

刚出现问题，我正在使用semantic-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>

Answer 1

当你遇到必须使用指令并同时使用语义ui jquery初始化的情况时，你要做的就是在指令中初始化sematic 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'
       });   
    }
}});

Answer 2

由于semantic-ui 2.2，只有css-only弹出窗口可用：

table.updateItem

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

语义UI Popup在angularjs指令中不起作用

2 个答案: