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

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。

如何动态地将弹出窗口元素添加到我的应用程序中？

Answer 1

函数 getDataSource(数据源){

    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"。