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编程起步(第五课)
Feb 27 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
Script的加载方法小结
Jan 12 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 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
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
Python内建数据结构详解
2016/02/03 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
旅游管理毕业生自荐信
2013/11/05 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
运动会入场式解说词
2014/02/18 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
合作意向协议书范本
2014/03/31 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang