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

标签 javascript jquery angularjs semantic-ui

刚遇到一个问题,我正在使用语义 UI 来显示弹出窗口,但如果我在 ng-view 指令中的任何模板内编写代码,它就不起作用,但如果我在 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>

最佳答案

当您面临必须使用指令并同时使用语义 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'
       });   
    }
}});

关于javascript - 语义 UI 弹出窗口在 angularjs 指令内不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35167233/

相关文章:

javascript - 将图形 "google chart"转换为图像

javascript - ReactJS - 图像未显示在 Material 表的自定义列中

javascript - 如何在 Angular 2 中触发闹钟(在闹钟中)?

jquery - CSS 限制溢出 : scroll to selected element

javascript - 如何在 React 类渲染方法中为元素提供动态类名

javascript - Angular 4 HttpClient 看不到 header

javascript - Kendo UI 图表颜色

javascript - AngularJS 从 JSON 本地文件获取数据

javascript - 调用指令模板中的函数

javascript - 如何在下载前强行打开文件浏览器保存文件?