在图标上动态添加 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"。