angularJS与bootstrap结合实现动态加载弹出提示内容  更新时间:2015年10月16日 09:09:50   作者:Agile.Zhou(kklldog)   这篇文章主要介绍了angularJS与bootstrap结合实现动态加载弹出提示内容,通过bootstrp弹出提示。感兴趣的朋友可以参考下本篇文章 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: html: app 1 app 2 以上是小编给大家介绍的angularJS与bootstrap结合实现动态加载弹出提示内容,希望大家喜欢。 您可能感兴趣的文章: 详解Bootstrap按钮 bootstrap改变按钮加载状态 全面解析Bootstrap表单使用方法(表单按钮) Bootstrap复选框和单选按钮美化插件(推荐) JS组件Bootstrap实现弹出框和提示框效果代码 Bootstrap每天必学之工具提示(Tooltip)插件 BootStrap tooltip提示框使用小结 BootStrap的alert提示框的关闭后再显示怎么解决 Bootstrap实现提示框和弹出框效果 bootstrap confirmation按钮提示组件使用详解 angularjs bootstrap 动态加载 相关文章 AngularJs页面筛选标签小功能 AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。本文重点给大家介绍AngularJs页面筛选标签小功能,非常不错,需要的朋友可以参考下 2016-08-08 AngularJS 依赖注入详解及示例代码 本文主要介绍AngularJS 依赖注入的知识,这里整理了相关的基础知识,并附示例代码和实现效果图,有兴趣的小伙伴可以参考下 2016-08-08 利用Angular.js编写公共提示模块的方法教程 最近工作中会经常遇到一些公用提示,使用框架自带很多时候不方便所以便自己编写了一个公共提示模块,下面这篇文章主要介绍了利用Angular.js编写公共提示模块的方法教程,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-05-05 ionic选择多张图片上传的示例代码 本篇文章主要介绍了ionic选择多张图片上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 Angular4实现图片上传预览路径不安全的问题解决 这篇文章主要给大家介绍了关于Angular4实现图片上传预览路径不安全问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。 2017-12-12 AngularJS基础 ng-selected 指令简单示例 本文主要介绍AngularJS ng-selected 指令,这里对ng-selected 指令的基础资料做了详细介绍,并附有示例代码,有需要的小伙伴可以参考下 2016-08-08 详解Angular2中的编程对象Observable 大家都是在Reactive Extensions for Javascript诞生于几年前,随着angular2正式版的发布,它将会被更多开发者所认知。这篇文章我们来详细介绍RxJs提供的Observable对象,有需要的朋友们可以参考借鉴。 2016-09-09 AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值 这篇文章主要介绍了AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下 2016-01-01 AngularJs 利用百度地图API 定位当前位置 获取地址信息 本文主要介绍了AngularJs 利用百度地图API 定位当前位置 获取地址信息的方法步骤。具有一定的参考价值,下面跟着小编一起来看下吧 2017-01-01 angular组件间传值测试的方法详解 这篇文章主要给大家介绍了关于如何测试angular组件间传值的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angular组件具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-05-05 最新评论

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结合实现动态加载弹出提示内容,希望大家喜欢。

您可能感兴趣的文章:

  • 详解Bootstrap按钮
  • bootstrap改变按钮加载状态
  • 全面解析Bootstrap表单使用方法(表单按钮)
  • Bootstrap复选框和单选按钮美化插件(推荐)
  • JS组件Bootstrap实现弹出框和提示框效果代码
  • Bootstrap每天必学之工具提示(Tooltip)插件
  • BootStrap tooltip提示框使用小结
  • BootStrap的alert提示框的关闭后再显示怎么解决
  • Bootstrap实现提示框和弹出框效果
  • bootstrap confirmation按钮提示组件使用详解
张贴在3