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> varapp=angular.module('testApp',[]); app.factory('dataService',function(){ varservice={}; service.cacheObj={}; service.getAppName=function(appId,callback){ if(service.cacheObj[appId]){ console.log('getnamefromcache'); callback(service.cacheObj[appId]); return; } //hereissample.Alwaysajax. service.cacheObj[appId]='QQ'; callback('QQ'); }; returnservice; }); app.directive('myPopover',function(dataService){ return{ restrict:'AE', link:function(scope,ele,attrs){ $(ele).data('title','App'); $(ele).data('content',"<divid='popDiv'>Name:-</div>"); $(ele).popover({html:true,trigger:'hover'}); $(ele).on('shown.bs.popover',function(){ varpopDiv=$('#popDiv'); console.log(popDiv); dataService.getAppName('xxx',function(name){ popDiv.html('Name:'+name); }); }); } }; }); app.controller("test",function($scope){ }); </script>
html:
<divng-app="testApp"> <divng-controller="test"> <div> <amy-popover>app1</a> <amy-popover>app2</a> </div> </div> </div>
以上是小编给大家介绍的angularJS与bootstrap结合实现动态加载弹出提示内容,希望大家喜欢。