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 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

Django数据从sqlite迁移数据到MySQL

昨天快速搭建了一套自己的知识库 感觉一下子有了很多的事情要做,至少得让自己用得舒服些。 没想到有了这个小工具之后,我发现我之前过得真是刀耕火种的信息收集。为什么...

3866
来自专栏QQ会员技术团队的专栏

H5直播避坑指南

面对着产品同学不断的询问:为什么 h5 的体验这么差?为什么不能和 app 的播放体验保持一致?我们对着 h5 不明确的文档和不同浏览器的怪异表现欲哭无泪。

41912
来自专栏杨建荣的学习笔记

Django数据从sqlite迁移数据到MySQL

昨天快速搭建了一套自己的知识库:使用Django基础模板搭建自己的知识库 感觉一下子有了很多的事情要做,至少得让自己用得舒服些。 没想到有了这个小工具之后,我发...

3183
来自专栏Python、Flask、Django

骚气的置顶

1085
来自专栏向治洪

android获取设备唯一标示

概述 有时需要对用户设备进行标识,所以希望能够得到一个稳定可靠并且唯一的识别码。虽然Android系统中提供了这样设备识别码,但是由于Android系统版本、...

7347
来自专栏QQ会员技术团队的专栏

H5直播避坑指南

作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目,...

52210
来自专栏Jerry的SAP技术分享

如何从ERP下载Sales BOM到CRM

BOM的抬头维护material 1419,在BOM的component部分维护另外两个material 1421和1422。

3127
来自专栏Zchannel

火狐浏览器的暗黑主题终于来了,跟随原生模式

953
来自专栏嵌入式程序猿

Simulink , 你值得用起来

MATLAB工具链在现代产品的开发中有着越来越多的应用,从需求管理到模型建立,到仿真测试,到代码生成部署都可以完成,大大减少了开发的时间,加速了产品的交付率和上...

742
来自专栏XAI

企业支付宝账号开发接口教程--JAVA-UTF-8(实际操作------SpringMVC+JSP)

关于即时到账的开发。审核通过。简单测试如下。 希望看的可以收藏或者赞一下哦。 1:拥有自己的支付宝企业账号。去产品商店选择适合自己的方案。并签约合同。 ? 2:...

6629

扫码关注云+社区