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 组件之旅(二)编码实现和算法
Oct 28 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
AngularJS表单验证功能分析
May 26 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
python ddt实现数据驱动
2018/03/14 Python
Python中logging实例讲解
2019/01/17 Python
公司人力资源的自我评价
2014/01/02 职场文书
《小池塘》教学反思
2014/02/28 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js