angularJS与bootstrap结合实现动态加载弹出提示内容


Posted in Javascript onOctober 16, 2015

angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板。Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒。用angularjs就像写后台代码,更规范,更结构化,更可控。

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>

以上是小编给大家介绍的angularJS与bootstrap结合实现动态加载弹出提示内容,希望大家喜欢。

Javascript 相关文章推荐
javascript面向对象编程代码
Dec 19 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
js中数组的常用方法小结
Dec 30 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 Javascript
javascript实现动态标签云
Oct 16 #Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 #Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 #Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 #Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 #Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 #Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 #Javascript
You might like
探讨捕获php错误信息方法的详解
2013/06/09 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python中的lambda表达式用法详解
2016/06/22 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python反射的用法实例分析
2018/02/11 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python实现数字炸弹游戏程序
2020/07/17 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
党建示范点实施方案
2014/03/12 职场文书
优秀会计求职信
2014/07/04 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
公司周年庆寄语
2019/06/21 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
分享几个实用的CSS代码块
2022/06/10 HTML / CSS