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

相关文章

来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3258
来自专栏落花落雨不落叶

canvas画简单电路图

81311
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2810
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

5388
来自专栏杨龙飞前端

scrollto 到指定位置

2894
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2965
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5208
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2886
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2997

扫码关注云+社区