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