angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容
更新時(shí)間：2015年10月16日 09:09:50 作者：Agile.Zhou(kklldog)
這篇文章主要介紹了angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章
angularjs是由Google團(tuán)隊(duì)開發(fā)的一款非常優(yōu)秀web前端框架。在當(dāng)前如此多的web框架下，angularjs能脫穎而出，從架構(gòu)設(shè)計(jì)上就高人一等，雙向數(shù)據(jù)綁定，依賴注入，指令，MVC，模板。Angular.js創(chuàng)新地把后臺(tái)技術(shù)融入前端開發(fā)，掃去jQuery一度的光芒。用angularjs就像寫后臺(tái)代碼，更規(guī)范，更結(jié)構(gòu)化，更可控。
1.bootstrp的彈出提示
bootstrap已經(jīng)幫我們封裝了非常好用的彈出提示Popover。
http://v3.bootcss.com/javascript/#popovers
2.自定義popover指令
我們使用一個(gè)指令給任意元素加上popover，并且可以根據(jù)情況改變popover的content內(nèi)容。
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結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容，希望大家喜歡。
相關(guān)文章
如何利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用詳解
這篇文章主要給大家介紹了如何利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用@angular/cli V6.0具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考下2018-05-05
AngularJS中$watch和$timeout的使用示例
這篇文章給大家介紹了AngularJS中$watch和$timeout的使用例子，通過示例代碼相信更能讓大家理解，有需要的朋友們下面來一起看看吧。2016-09-09
Angular 是一款開源 JavaScript 框架，使開發(fā)和測(cè)試變得更加容易,這篇文章主要介紹了詳解Angular 開發(fā)環(huán)境搭建,需要的朋友可以參考下2017-06-06
本篇文章主要介紹了Angular中的生命周期鉤子的理解，詳細(xì)的介紹了生命周期鉤子和主要的生命周期鉤子，有興趣的可以了解一下2017-07-07
下面小編就為大家?guī)硪黄猘ngular.js之路由的選擇方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
AngularJS通過$location獲取及改變當(dāng)前頁面的URL
本篇將介紹AngularJS中的$location服務(wù)的基本用法,$location服務(wù)的主要作用是用于獲取當(dāng)前url以及改變當(dāng)前的url,并且存入歷史記錄。本文通過示例代碼介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09
Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法
本篇文章主要介紹了Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
本文主要介紹AngularJs expression,這里整理了詳細(xì)的資料，并附示例代碼，有興趣的小伙伴可以參考下2016-09-09
Angular項(xiàng)目如何升級(jí)至Angular6步驟全紀(jì)錄
這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目如何升級(jí)至Angular6的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09
這篇文章主要介紹了使用Angular CLI從藍(lán)本生成代碼詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03