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 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP获取url的函数代码
2011/08/02 PHP
Symfony的安装和配置方法
2016/03/17 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
React如何避免重渲染
2018/04/10 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
Python求导数的方法
2015/05/09 Python
Python实现识别手写数字大纲
2018/01/29 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
应届生英语教师求职信
2013/11/05 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
防沙治沙典型材料
2014/05/07 职场文书
学习型党组织心得体会
2014/09/12 职场文书
优秀员工事迹材料
2014/12/20 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python