angularJS与bootstrap结合实现动态加载弹出提示内容

前端之家收集整理的这篇文章主要介绍了angularJS与bootstrap结合实现动态加载弹出提示内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板。Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒。用angularjs就像写后台代码,更规范,更结构化,更可控。

1.bootstrp的弹出提示

  bootstrap已经帮我们封装了非常好用的弹出提示Popover。

  

2.自定义popover指令

  我们使用一个指令给任意元素加上popover,并且可以根据情况改变popover的content内容。

JS:

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',"
Name:-
"); $(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) { });

html:

以上是小编给大家介绍的angularJS与bootstrap结合实现动态加载弹出提示内容,希望大家喜欢。

猜你在找的JavaScript相关文章