angularJS与bootstrap结合实现动态加载弹出提示内容
程序员文章站
2022-03-08 20:22:28
angularjs是由google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖...
angularjs是由google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,mvc,模板。angular.js创新地把后台技术融入前端开发,扫去jquery一度的光芒。用angularjs就像写后台代码,更规范,更结构化,更可控。
1.bootstrp的弹出提示
bootstrap已经帮我们封装了非常好用的弹出提示popover。
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结合实现动态加载弹出提示内容,希望大家喜欢。
上一篇: C++公有继承,保护继承,私有继承的区别
下一篇: “微信卖茶叶”特大网络诈骗被查获