angularJS与bootstrap结合实现动态加载弹出提示内容
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结合实现动态加载弹出提示内容,希望大家喜欢。
相关文章
ng-events类似ionic中Events的angular全局事件
这篇文章主要介绍了ng-events类似ionic中Events的angular全局事件,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09angular项目中bootstrap-datetimepicker时间插件的使用示例
这篇文章主要介绍了angular项目中bootstrap-datetimepicker时间插件的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-03-03Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
这篇文章主要介绍了Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例,具有一定的参考价值,有兴趣的可以了解一下。2017-01-01Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
这篇文章主要介绍了Angular外部使用js调用Angular控制器中的函数方法或变量用法,结合实例形式分析了Angular基于外部JS调用控制器中方法与变量的具体实现步骤与相关技巧,需要的朋友可以参考下2016-08-08AngularJs Understanding Angular Templates
本文主要介绍AngularJs Understanding Angular Templates的资料,这里整理了详细的资料及简单示例代码,有兴趣的小伙伴的参考下2016-09-09Angular中ng-bind和ng-model的区别实例详解
这篇文章主要介绍了Angular中ng-bind和ng-model的区别实例详解的相关资料,需要的朋友可以参考下2017-04-04
最新评论