Question

因此，我在Angular应用程序中动态添加图标，指示基于颜色的不同来源。

这是在这个函数中：

function getDataSource(datasource) {

        switch (datasource) {

            case 'A1':
                return '<span><i class=\"fa fa-circle blue\"></i></span>';
            case 'A2':
                return '<span><i class=\"fa fa-circle green\"></i></span>';
            case 'A3':
                return '<span><i class=\"fa fa-circle yellow\"></i></span>';
            case 'A4':
                return '<span><i class=\"fa fa-circle red\"></i></span>';
        }
    }

我想要做的是在这些跨度中或在显示一组相关链接的图标本身中有一个弹出窗口。我将ui.bootstrap模块作为这些数据源图标所在的特定模块的依赖项。

当我尝试使用popover之前没有任何显示。

如何动态地向我的应用添加popover元素？

Answer 1

function getDataSource（datasource）{

    switch (datasource) {

        case 'A1':
            return '<span data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"><i class=\"fa fa-circle blue\"></i></span>';
        case 'A2':
            return '<span data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"><i class=\"fa fa-circle green\"></i></span>';
        case 'A3':
            return '<span data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"><i class=\"fa fa-circle yellow\"></i></span>';
        case 'A4':
            return '<span data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"><i class=\"fa fa-circle red\"></i></span>';
    }
}

然后用JS

激活它们

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

这将激活页面上的所有data-toggle =“popovers”。

在图标上动态添加UI Bootstrap Popover？

1 个答案: