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結合實現動態加載彈出提示內容，希望大家喜歡。
新聞熱點
疑難解答
