Javascript 语义UI弹出窗口在angularjs指令内不起作用_Javascript_Jquery_Angularjs_Semantic Ui

Javascript 语义UI弹出窗口在angularjs指令内不起作用

javascript jquery angularjs

Javascript 语义UI弹出窗口在angularjs指令内不起作用,javascript,jquery,angularjs,semantic-ui,Javascript,Jquery,Angularjs,Semantic Ui,刚刚遇到一个问题，我正在使用语义ui显示弹出窗口，但是如果我在ng view指令中的任何模板中编写代码，它将不起作用，但是如果我在ng view指令之外编写代码，它将起作用，代码有什么问题吗这将起作用 <body> <div class="ui container"> <div ng-view></div> <div class="ui teal button" data-title="Using c

刚刚遇到一个问题，我正在使用语义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>


点击我
$（'.ui.teal.button'）。弹出窗口({
点击
});

这不起作用

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


点击我
$（'.ui.teal.button'）。弹出窗口({
点击
});

当您面临必须使用指令同时使用语义ui jquery初始化的情况时，您需要做的是初始化指令中的语义ui对象

因此，您必须做的第一件事是，在ng view指令中添加您的按钮。然后生成一个新指令“showPopUp”

由于语义ui 2.2，只有css弹出窗口可用：

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

data tooltip=“在此处添加文本”

据我所知，将任何不是head或body标记的内容作为HTML标记的直接子项是不好的做法。（请参阅以供参考）

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

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