angularJS配合bootstrap动态加载弹出提示内容

1.bootstrp的弹出提示

  bootstrap已经帮我们封装了非常好用的弹出提示Popover。

  http://v3.bootcss.com/javascript/#popovers

2.自定义popover指令

  我们使用一个指令给任意元素加上popover,并且可以根据情况改变popover的content内容。

JS:

<script>
    var app = angular.module('testApp', []);

    app.factory('dataService',function() {
        var service = {};
        service.cacheObj = {};
        service.getAppName = function (appId, callback) {
            if (service.cacheObj[appId]) {
                console.log('get name from cache');
                callback(service.cacheObj[appId]);
                return;
            }
            //here is sample. Always ajax.
            service.cacheObj[appId] = 'QQ';
            callback('QQ');
        };

        return service;
    });

    app.directive('myPopover', function (dataService) {
        return {
            restrict: 'AE',
            link: function (scope, ele, attrs) {
                $(ele).data('title','App');
                $(ele).data('content', "<div id ='popDiv'>Name:-</div>");
                $(ele).popover({ html: true, trigger: 'hover'});
                $(ele).on('shown.bs.popover',function() {
                    var popDiv = $('#popDiv');
                    console.log(popDiv);
                    dataService.getAppName('xxx',function(name) {
                        popDiv.html('Name:'+name);
                    });
                });
            }
    };
    });

    app.controller("test",function($scope) {

    });

</script>

html:

<div ng-app="testApp">
    <div ng-controller="test">
        <div>
            <a my-popover>app 1</a>
            <a my-popover>app 2</a>
        </div>
   </div>
</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏生信宝典

CIRCOS增加热图、点图、线图和区块属性

CIRCOS图在有了染色体信息界定绘图区域后,就可以向里面添加离散数据如标记特定的区域或连续数据如展示修饰的丰度等。 经过前面部分对CIRCOS基本安装,最简单...

2487
来自专栏数据小魔方

气泡图(bubble)

今天跟大家分享的是气泡图! ▽▼▽ EXCEL制作的气泡图需要三个序列数据,除了通常必须的X轴、Y轴之外,还需要第三列数据,用来指定气泡面积大小。 ●●●●● ...

3575
来自专栏Google Dart

AngularDart Material Design 记分卡 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

1054
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第二天

2745
来自专栏生信宝典

CIRCOS圈图绘制 - 最简单绘图和解释

Circos是绘制圈图的神器,在http://circos.ca/images/页面有很多CIRCOS可视化的示例。 ? ? Circos可以在线使用,在线使用...

4429
来自专栏MixLab科技+设计实验室

DIY一个Sketch插件,生成猫猫狗狗的全家福

最近朋友圈都在玩的全家福: ? 看了下是使用 cocos2D 引擎制作的, http://www.cocos.com/creator 主要是图片合成,利用前端...

2807
来自专栏hbbliyong

Extjs 项目中常用的小技巧,也许你用得着(4)---Extjs 中的cookie设置

1.ExtJs设置cookie两种方式 其一:设置cookie如下 saveacct=isForm.getForm().findField('itemselec...

2063
来自专栏IMWeb前端团队

移动端重构实战系列5——form元素

form 大概要实现的效果如下图(具体demo可见sheral form): ? 粗略一看,跟line list差不多,好像可以直接套用,但是深究起来还是有那么...

2225
来自专栏ytkah

Excel表格的35招必学秘技[配图]

一、让数据按需排序   如果你要将员工按其所在的部门进行排序,这些部门名称既的有关信息不是按拼音顺序,也不是按笔画顺序,怎么办?可采用自定义序列来排序。  ...

4238
来自专栏非著名程序员

Android Material Design系列之主题样式介绍说明等

今天这篇文章应该算是Material Design系列的补充篇,因为这篇文章本来应该放到前面讲的,因为讲的是主题嘛,对于一些状态和颜色的介绍,因为我们一新建一个...

1847

扫码关注云+社区